Module «input-default». Обычный инпут, но с всегда видимым label поверх поля ввода. + autosize для textarea

Source:

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

Демо:

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

Плагины:

https://www.jacklmoore.com/autosize/

https://jquery.com/

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

//

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autosize@6.0.1/dist/autosize.min.js"></script>

Разметка:

//

<div class="input-default">
    <div class="input-default__label">Эл. почта</div>
    <input type="text" value="Mail" />
</div>

<div class="input-default">
    <div class="input-default__label">Комментарий</div>
    <textarea rows="5">Mail</textarea>
</div>

Стили:

//

.input-default {
    position: relative;
    border: 1px solid #fff;
    padding: 1.3rem 2rem;
    cursor: text;

    &__label {
        font-size: 1.2rem;
        line-height: calc(14 / 12);
        letter-spacing: -0.01em;
        color: #fff;
        margin-bottom: 0.8rem;
    }

    input,
    textarea {
        transition: border-color 0.2s;
        width: 100%;
        background: none;
        border: 0;
        border-radius: 0;
        font-family: inherit;
        font-size: 1.5rem;
        font-style: italic;
        text-transform: uppercase;
        line-height: 1.2;
        color: rgba(#fff, 0.4);

        &::placeholder {
        }

        &:focus {
        }

        &.error {
            border-color: #f00;
        }
    }

    textarea {
        @include hide-scrollbar;
    }

    label.error {
        display: block;
        font-size: 1.4rem;
        margin-top: 0.5em;
        color: #f00;
    }
}

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

//

$(function () {
    autosize(document.querySelectorAll("textarea"));
});

// input-default.js
function handleInputClick(e) {
    $(this).find("input, textarea").focus();
}

$(function () {
    $(document).on("click", ".input-default", handleInputClick);
});