Работа с input: подборка полезных решений на HTML и CSS
В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.
Не смотря на кажущуюся тривиальность, описываемые ниже решения далеко не всегда применяются в процессе создания различных форм ввода на сайте. Список включает в себя наиболее необычный по мнению автора CSS-код, решающий разрозненные задачи — от изменения цвета каретки до затенения символов в поле.
Стиль выделения ошибок
Стандартное уведомление об ошибках в словах, введенных в поле ввода, представляет собой волнистое подчеркивание. CSS4 позволит установить иной способ выделения орфографических и грамматических ошибок — посредством новых псевдоэлементов — ::spelling-error
и ::grammar-error
. На текущий момент изменить оформление ошибок невозможно, так как эти псевдоэлементы не поддерживаются браузерами, однако их появление — лишь вопрос времени.
::grammar-error {
color: inherit;
background-color: #c6fbcc;
}
::spelling-error {
color: inherit;
background-color: #ffe5e5;
}
Указанные селекторы будут ограничены следующим набор свойств: color
, background-color
, cursor
, caret-color
, outline
, text-decoration
, text-shadow
и text-emphasis
.
Стиль выделения текста
В отличие от предыдущих псевдоэлементов из CSS4 ::selection
поддерживается большинством браузеров и представляет собой способ стилизации выделяемого пользователем содержимого как внутри отдельного поля ввода, так и во всём документе.
input::-moz-selection {
color: gold;
background: red;
}
input::selection {
color: gold;
background: red;
}
Для ::selection
есть пара нюансов, относящихся не только к input
:
- Браузеры на движке Webkit добавляют прозрачность к цвету, указанному в свойствах color и background-color, в результате чего фактический цвет выделения не соответствует заданному в CSS, поэтому их значение следует преобразовывать в формат rgba() с альфа-каналом 0.996 (255/256). При этом манипуляции со свойством opacity не приносят никакого эффекта;
- Firefox не применяет стиль для картинок, поэтому они всегда выделяются стандартной синей заливкой.
С учетом особенностей Webkit цвета при выделении рекомендуется задавать следующим образом:
input::-moz-selection {
background-color: red; /* для Firefox допускается прямое указание цвета */
color: white;
}
input::selection {
background-color: rgba(255,0,0,.996); /* для Webkit цвета следует преобразовать в rgb(a) */
color: rgba(255,255,255,.996);
}
Пользовательское изменение габаритов поля ввода настраивается благодаря свойству resize
, применяемому также ко всем элементам со значением overflow отличным от visible. Вместе с его указанием для элемента рекомендуется также добавлять минимальную и максимальную ширину и высоту, чтобы избежать нежелательных смещений макета сайта:
Добавление эллипсиса
Когда ширина текстового содержимого обычного input type="text"
больше его фактической ширины, текст по умолчанию обрезается по правому краю и появляется возможность горизонтальной прокрутки. Чтобы сделать обрезку текста визуально привлекательнее через многоточие (эллипсис), следует применить text-overflow
:
input[type="text"] {
width: 15em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Удаление лишних элементов внутри полей в IE
Начиная с версии 10 в Internet Explorer такие типы полей как text или password по умолчанию содержат внутри себя дополнительные элементы, вставляемые браузером для улучшения юзабилити, — иконку очистки поля (крестик) и отображения пароля (глаз). Они легко удаляются благодаря соответствующим псевдоэлементам:
/* удаление иконки очистки поля в IE */
input[type="text"]::-ms-clear {
display: none;
}
/* удаление иконки отображения пароля в IE */
input[type="password"]::-ms-reveal {
display: none;
}
Удаление желтого фона при автозаполнении полей
В Webkit после автозаполнения (как правило, форм с логином и паролем) поля приобретают желтый фон и черный цвет текста, которые добавляются непосредственно стилями браузера:
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background-color: rgb(250, 255, 189) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
Переопределить данные правила невозможно, поэтому в качестве решения по удалению фона и указанию другого цвета текста предлагается сочетание свойств box-shadow
и -webkit-text-fill-color
:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 10em white inset !important;
-webkit-text-fill-color: yellow !important;
}
Однако это решение не сработает, если у поля изначально задано фоновое изображение, градиент или полностью прозрачный фон и их необходимо сохранить. В подобной ситуации следует воспользоваться анимацией:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-animation: autofill 0s forwards;
}
@-webkit-keyframes autofill {
100% {
background: transparent;
color: inherit;
}
}
Удаление стрелки в поле с datalist
При использовании атрибута list
(подробнее рассмотрен ниже) в браузерах Webkit к input
добавляется иконка в виде стрелки, указывающая на возможность выбора значений из выпадающего списка. За отображение иконки отвечает специальный псевдоэлемент, который может быть скрыт:
input[list]::-webkit-calendar-picker-indicator {
display: none;
}
Увеличение затенённых символов пароля
Как известно, вводимые в input type="password"
данные затеняются другими символами (как правило, маской служит астериск или черный круг). В Webkit размер этих символов значительно меньше, чем в остальных браузерах. Для их увеличения рекомендуется использовать для поля с паролем шрифт более жирного начертания. Из безопасных шрифтов на эту роль хорошо подходит Verdana, а так как изменения необходимы только для Webkit, селектор можно обернуть в специфический @media
:
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="password"] {
font-family: Verdana, Geneva, sans-serif;
letter-spacing: -.75px;
}
}
Затенение символов в поле ввода
Если для поля, отличного от типа password, требуется создать маску, т. е. затенить вводимые символы, стоит прибегнуть к свойству text-security
. Оно принимает значения circle
, disc
, none
или square
, но, к сожалению, на сегодняшний день доступно только для Webkit с соответствующим префиксом:
input[type="tel"] {
-webkit-text-security: circle; /* эмуляция input[type="password"] */
}
Подобное затенение может понадобиться, например, для ввода номера телефона, пин-кода и прочих важных данных, которые пользователь предпочел бы скрыть от посторонних глаз.
Существует кроссбраузерная альтернатива text-security, предполагающая замету шрифта в поле на другой шрифт, содержащий лишь три вышеназванных символа. Существенный недостаток решения в том, что оно не станет работать, если пользователь запретит подключение специфичных шрифтов с внешних ресурсов.
Полезные HTML-атрибуты
Среди множества атрибутов input
следует подробнее остановиться на autofocus
, inputmode
, autocapitalize
и list
, основной целью которых служит улучшение юзабилити форм. Они не так популярны среди прочих, а их функции в отдельных случаях заменяются JS-кодом.
Стоит так же отметить, что несмотря на все атрибуты и способы стилизации, возможности стандартного текстового поля сильно ограничены. Если требуется создать многофункциональную область ввода аналогичную тем, что используются в месседжерах и социальных сетях, например, input со вставкой emoji, следует прибегнуть к помощи HTML5-атрибута contenteditable.
Автофокус на элементе формы
Атрибут autofocus
позволяет заранее сфокусироваться на элементе формы, что в определенных ситуациях является прекрасной альтернативой методу HTMLElement.focus()
в JS:
<form action="login.php">
<input type="text" name="login" autofocus />
<input type="password" name="password" />
</form>
Предопределение формата вводимых в поле данных
Пользователям мобильных платформ с виртуальной клавиатурой можно помочь сэкономить время и упростить взаимодействие с формой, если заранее подсказать браузеру, что именно требуется ввести в конкретное поле.
«Некоторые устройства, в частности с виртуальными клавиатурами, могут предоставлять пользователю несколько методов ввода. Например, при вводе номера кредитной карты пользователь захочет видеть только клавиши для цифр 0−9, тогда как при вводе имени предпочтительнее работать с полем, которое автоматически начинает каждое слово с заглавной буквы». Спецификация HTML
Для этих целей существует атрибут inputmode
, сигнализирующий браузеру о том, клавиатуру какого именно формата использовать при вводе данных. Несмотря на большую полезность, из всех браузеров его полноценно поддерживает (включая элементы с contenteditable
) только Google Chrome самых свежих версий, а Opera и Firefox — через флаги.
Атрибут inputmode применяется на input
с типами text
, password
, email
или url
и согласно спецификации содержит следующие возможные значения:
none
— запрет на отображение клавиатуры;text
— текст, соответствующий языку пользователя;tel
— телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналогinput type="tel"
;url
— формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналогinput type="url"
;email
— формат для электронной почты с наличием символа «собака» и точки — аналогinput type="email"
;numeric
— только цифровая клавиатура — аналогinput type="number"
;decimal
— цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;search
— клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.
Кроме вышеперечисленных значений браузеры так же принимают:
verbatim
— дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;latin
— латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);latin-name
— latin, но для ввода имён;latin-prose
— latin, предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);full-width-latin
— latin-prose с добавлением дополнительных пользовательских языков;kana
иkatakana
— служат для ввода текста на японском языке;
Для большей «пуленепробиваемости» атрибут inputmode
рекомендуется применять вместе с соответствующим type
, который должен отражать семантически верный тип данных, и, если необходимо, pattern
, являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:
<!-- цифровая клавиатура -->
<input type="number" inputmode="numeric" />
<!-- цифровая клавиатура (ввод десятичных дробей с разделителем-точкой и шагом в 0.1) -->
<input type="number" inputmode="decimal" min="0" value="0" step=".1" />
<!-- поиск по сайту -->
<input type="search" inputmode="search" />
<!-- имя пользователя -->
<input type="text" inputmode="latin-name" />
<!-- никнейм пользователя (латиница, цифры, до 15 символов) -->
<input type="text" inputmode="verbatim" pattern="^[A-Za-z0-9_]{1,15}$" />
<!-- чат между пользователями -->
<textarea inputmode="full-width-latin"></textarea>
<!-- пароль, содержащий разные регистры и цифру -->
<input type="password" inputmode="verbatim" pattern="^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?!.*s).*$" />
Перевод вводимых данных в верхний регистр букв
Атрибут autocapitalize
позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для textarea
, а также для полей с типами text или search и может иметь следующие значения:
- off или none — перевод в верхний регистр не осуществляется (по умолчанию);
- characters — для символов (артикулы, различные коды);
- words — для слов (имена, адреса, названия организаций);
- sentences — для предложений (полезно для
textarea
, где контент должен представляться как абзац текста);
Например, подобным образом может выглядеть область ввода для контента, который разработчик хочет видеть оформленным как абзац:
<textarea autocapitalize="sentences" inputmode="full-width-latin"></textarea>
Стоит отметить, что как и inputmode
, этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами autocapitalize крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.
Добавление готовых вариантов для ввода
Юзабилити полей можно улучшить, если предложить пользователю выбрать заданное значение из списка готовых через атрибут list
и дополняющий его элемент datalist
. Отличие от традиционного select
заключается в том, что поле доступно для редактирования и ввода любых значений, а предлагаемые варианты — элементы option
— показываются либо по желанию пользователя, либо во время ввода при условии частичного совпадения по первым (и далее) символам. Это отличное решение в тех случаях, когда вводимые данные можно предугадать засчёт ограниченного количества вариантов.
Для добавления в поле доступных опций в его атрибуте codelist
указывается идентификатор списка, которым, в свою очередь, должен обладать datalist
:
<input list="colors" type="text" />
<datalist id="colors">
<option value="Красный">
<option value="Синий">
<option value="Зеленый">
</datalist>
Предыдущая запись
HTML десятичные коды для шрифта DingbatСледующая запись
Media queries — шпаргалка основных медиа-запросов в CSS