Ввод с меткой с помощью CSS — Учебник

HTML

Для HTML нам понадобится контейнер с label и input.

Мы также установим для input пробел (» «), что позволит нам определить с помощью CSS, когда input имеет какое-то значение.

<div class="input_container">
        <input type="text" name="name" placeholder=" ">
        <label for="name">Name</label>
</div>

CSS

Для CSS мы зададим относительное положение контейнера и изменим шрифт.

.input_container {
    position: relative;
    font-family: BlinkMacSystemFont;
}

Теперь установим позицию label на абсолютную и выровняем его по центру с вершиной 50% и трансформацией translateX(-50%).

И z-index на -1, чтобы ввод был поверх label.

В противном случае мы не сможем нажать на ввод, когда мышь находится на ярлыке.

Затем установим цвет фона на белый (#fff). На самом деле здесь нужно просто установить тот же цвет, что и фон, потому что этот элемент будет располагаться поверх верхней границы input, а мы не хотим, чтобы граница была позади.

Наконец, я установлю цвет текста на светло-серый и добавлю отступы и подложки.

.input_container label {
    position: absolute;
    margin: 0 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    background-color: #fff;
    padding: 0 2px;
    color: #aaa;
}

Для ввода я установлю цвет границы таким же светло-серым, какой я использовал для цвета текста метки.

Я также добавлю радиус границы, отступы и установлю прозрачный цвет фона, чтобы было видно надпись позади ярлыка.

.input_container input {
    border: 1px solid #aaa;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px;
}

Затем я просто удалю контур при фокусировке.

.input_container input:focus {
    outline: none;
}

Теперь я стилизую метку, когда input находится в фокусе или имеет какое-то значение.

Используя «input:not(:placeholder-shown)», я выберу input, когда есть какое-то значение (когда placeholder не показан) и когда он в фокусе, и, используя селектор sibling «+», я выберу label и переместим его поверх верхней границы input, установив z-index на 1, а top на 0.

И уменьшу размер шрифта.

/* Focus or containing value (placeholder not shown) */      .input_container input:focus + label,
.input_container input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 8px;
    z-index: 1;
}

Когда input находится в фокусе, я перезапишу цвет метки и светло-серую границу input и установлю ее зеленой.

/* Only when focused */
.input_container input:focus + label {
    color: rgb(15, 156, 116);
}
.input_container input:focus {
    border-color: rgb(15, 156, 116);
}

Вот и все.

Код и видеоурок вы можете найти здесь.

Спасибо за прочтение. ❤️