Подсказка в поле формы
Подсказки в полях формы помогают пользователю понять, какие данные ему надо вводить. Для <input> есть атрибут placeholder, он выводит в поле текст, который исчезает при наборе текста. С помощью псевдокласса :focus и псевдоэлемента ::placeholder можно изменить вид подсказки, чтобы при получении фокуса она сдвигалась вверх и уменьшалась (рис. 1).
Рис. 1. Изменение вида подсказки
Стиль подсказки устанавливается через селектор ::placeholder — зададим серый цвет текста с помощью свойства color и время трансформации через transition.
input::placeholder {
transition: 0.5s; /* Время трансформации */
color: #aaa; /* Цвет подсказки */
}
Вид подсказки при получении полем фокуса устанавливается через селектор :focus::placeholder. В стилевых правилах зададим размер шрифта через свойство font-size и переместим подсказку через transform с функцией translateY. Отрицательное значение сдвинет подсказку вверх.
input:focus::placeholder {
font-size: 10px; /* Размер шрифта */
transform: translateY(-16px); /* Сдвигаем вверх */
}
Остальной код нужен для красоты и приведён в примере 1.
Пример 1. Изменение подсказки при фокусе
К сожалению, данный вариант не является универсальным и не работает желаемым образом в браузерах Internet Explorer и Firefox. Так что приведём альтернативное решение, когда подсказка выводится с помощью элемента <label>. Каждую строку заключим в <div> с классом row, а внутрь вставим <input> и <label>, связав их друг с другом через атрибуты id и for.
<div class="row">
<input type="text" name="login" id="login">
<label for="login">Логин</label>
</div>
Стиль для <input> останется тем же, что и в примере 1, и добавится только стиль для <label>. Чтобы текст подсказки отображался поверх поля формы превращаем <label> в блочный элемент и смещаем его вверх через свойство transform с функцией translateY. Так же важно задать постоянный line-height, поскольку шрифт при фокусе будет уменьшаться, соответственно, уменьшаться и межстрочное расстояние, что приведёт к «скачкам» текста. Здесь же ставим и время трансформации подсказки.
.row label {
display: block; /* Блочный элемент */
color: #aaa; /* Цвет подсказки */
transform: translateY(-1.5rem); /* Сдвигаем вверх */
line-height: 1rem; /* Межстрочный интервал */
transition: 0.5s; /* Время трансформации */
}
Для определения стиля подсказки при получении фокуса используем селектор input:focus+label. Но этого недостаточно, ведь если набрать в поле текст и убрать фокус, подсказка вернётся в своё исходное положение и будет отображаться поверх введённого текста. Нам надо сделать так, что если в поле содержится текст, то подсказка остаётся вверху. Для этого подключаем селектор input:valid+label, он задаёт стиль <label>, когда в <input> введён корректный текст.
.row input:focus + label,
.row input:valid + label {
font-size: 10px; /* Размер шрифта */
transform: translateY(-2.5rem); /* Сдвигаем вверх */
}
Псевдокласс :valid работает для полей формы, когда в них вставлен атрибут required. Так что в коде HTML добавляем этот атрибут к <input>, как показано в примере 2.
Пример 2. Подсказка через <label>
См. также
- <label>
- Аккордеон меню
- Атрибут placeholder
- Вкладки на CSS
- Выпадающее меню
- Использование :checked
- Подсказывающий текст
- Пользовательские формы
- Псевдокласс :invalid
- Псевдокласс :placeholder-shown
- Псевдокласс :valid
- Псевдоэлемент ::placeholder
- Стилизация переключателей
- Стилизация флажков
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label