Module «input-underline». Инпут с нижней границей с прозрачным фоном.

Source:

https://html.ildar-meyker.ru/html-gosha/components.html?tab=tab-inputs

Демо:

https://codepen.io/ildar-meyker/pen/ZEPqJPP

Плагины:

Подключение:

//

Разметка:

//

<div class="c__row">
    <div>
        <div class="c__h2">input</div>
        <div class="input-underline">
            <input type="text" placeholder="EMAIL" />
            <label for="" class="error">Ошибка</label>
        </div>
    </div>
    <div>
        <div class="c__h2">textarea</div>
        <div class="input-underline">
            <textarea placeholder="content"></textarea>
            <label for="" class="error">Ошибка</label>
        </div>
    </div>
</div>

Стили:

// blocks/inputs/input-underline.scss
.input-underline {
    input,
    textarea {
        transition: border-color 0.2s;
        width: 100%;
        padding: 1.7rem 0;
        border: 1px solid #101010;
        border-width: 1px 0;
        border-top-color: transparent;
        background: transparent;
        font-size: 1.2rem;
        font-family: "Inter", sans-serif;
        line-height: 1.2;
        text-transform: uppercase;
        color: #b7b7b7;

        &::placeholder {
            color: #b7b7b7;
        }

        &:focus {
            color: #101010;
        }

        &.error {
            border-bottom-color: #d30000;
        }
    }

    textarea {
        height: 5.2rem;
    }

    label.error {
        color: #d30000;
        font-size: 0.8rem;
        line-height: calc(12 / 8);
        text-transform: uppercase;
        display: block;
        margin-top: 1rem;
    }
}

@media (min-width: 1000px) {
    .input-underline {
        input {
            font-size: 1.4rem;
        }
    }
}

Инициализация:

//