Css изменить цвет поля input

Подборка рецептов для input

В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.

Миниатюрные CSS-решения

Не смотря на кажущуюся тривиальность, описываемые ниже решения далеко не всегда применяются в процессе создания различных форм ввода на сайте. Список включает в себя наиболее необычный по мнению автора CSS-код, решающий разрозненные задачи — от изменения цвета каретки до затенения символов в поле.

Изменение цвета каретки

— это видимый мерцающий индикатор в поле ввода, указывающий на положение для вставки символов пользователем. По умолчанию цвет каретки соответствует цвету текста внутри поля. Изменить это поведение и установить иную расцветку каретки для , или прочих элементов с атрибутом contenteditable позволяет свойство caret-color , которое принимает в качестве значения любой цвет и поддерживается только в последних версиях Chrome, Firefox, Safari и Opera.

input, textarea, [contenteditable]

Аналогичным образом можно скрыть каретку, присвоив свойству caret-color значение transparent или установив для цвета нулевой альфа-канал — rgba(0,0,0,0) .

Стиль выделения ошибок

Стандартное уведомление об ошибках в словах, введенных в поле ввода, представляет собой волнистое подчеркивание. CSS4 позволит установить иной способ выделения орфографических и грамматических ошибок — посредством новых псевдоэлементов — ::spelling-error и ::grammar-error . На текущий момент изменить оформление ошибок невозможно, так как эти псевдоэлементы не поддерживаются браузерами, однако их появление — лишь вопрос времени.

::grammar-error < color: inherit; background-color: #c6fbcc; >::spelling-error

Указанные селекторы будут ограничены следующим набор свойств: color , background-color , cursor , caret-color , outline , text-decoration , text-shadow и text-emphasis .

Стиль выделения текста

В отличие от предыдущих псевдоэлементов из CSS4 ::selection поддерживается большинством браузеров и представляет собой способ стилизации выделяемого пользователем содержимого как внутри отдельного поля ввода, так и во всём документе.

input::-moz-selection < color: gold; background: red; >input::selection

Для ::selection есть пара нюансов, относящихся не только к :

• 1. Браузеры на движке Webkit добавляют прозрачность к цвету, указанному в свойствах color и background-color , в результате чего фактический цвет выделения не соответствует заданному в CSS, поэтому их значение следует преобразовывать в формат rgba() с альфа-каналом 0.996 ( 255/256 ). При этом манипуляции со свойством opacity не приносят никакого эффекта;
• 2. 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 . Вместе с его указанием для элемента рекомендуется также добавлять минимальную и максимальную ширину и высоту, чтобы избежать нежелательных смещений макета сайта:

Добавление эллипсиса

Когда ширина текстового содержимого обычного больше его фактической ширины, текст по умолчанию обрезается по правому краю и появляется возможность горизонтальной прокрутки. Чтобы сделать обрезку текста визуально привлекательнее через многоточие (эллипсис), следует применить text-overflow :

Удаление лишних элементов внутри полей в IE

Начиная с версии 10 в Internet Explorer такие типы полей как text или password по умолчанию содержат внутри себя дополнительные элементы, вставляемые браузером для улучшения юзабилити, — иконку очистки поля (крестик) и отображения пароля (глаз).

Они легко удаляются благодаря соответствующим псевдоэлементам:

/* удаление иконки очистки поля в IE */ input[type="text"]::-ms-clear < display: none; >/* удаление иконки отображения пароля в IE */ input[type="password"]::-ms-reveal

Удаление желтого фона при автозаполнении полей

В Webkit после автозаполнения (как правило, форм с логином и паролем) поля приобретают желтый фон и черный цвет текста, которые добавляются непосредственно стилями браузера:

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill

Переопределить данные правила невозможно, поэтому в качестве решения по удалению фона и указанию другого цвета текста предлагается сочетание свойств box-shadow и -webkit-text-fill-color :

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active

Однако это решение не сработает, если у поля изначально задано фоновое изображение, градиент или полностью прозрачный фон и их необходимо сохранить. В подобной ситуации следует воспользоваться анимацией:

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[list]::-webkit-calendar-picker-indicator

Увеличение затенённых символов пароля

Как известно, вводимые в данные затеняются другими символами (как правило, маской служит астериск или черный круг). В 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 с соответствующим префиксом:

Подобное затенение может понадобиться, например, для ввода номера телефона, пин-кода и прочих важных данных, которые пользователь предпочел бы скрыть от посторонних глаз.

Существует кроссбраузерная альтернатива text-security, предполагающая замету шрифта в поле на другой шрифт, содержащий лишь три вышеназванных символа. Существенный недостаток решения в том, что оно не станет работать, если пользователь запретит подключение специфичных шрифтов с внешних ресурсов.

Полезные HTML-атрибуты

Среди множества атрибутов следует подробнее остановиться на autofocus , inputmode , autocapitalize и list , основной целью которых служит улучшение юзабилити форм. Они не так популярны среди прочих, а их функции в отдельных случаях заменяются JS-кодом.

Стоит так же отметить, что несмотря на все атрибуты и способы стилизации, возможности стандартного текстового поля сильно ограничены. Если требуется создать многофункциональную область ввода аналогичную тем, что используются в месседжерах и социальных сетях, например, input со вставкой emoji, следует прибегнуть к помощи HTML5-атрибута contenteditable .

Автофокус на элементе формы

Атрибут autofocus позволяет заранее сфокусироваться на элементе формы, что в определенных ситуациях является прекрасной альтернативой методу HTMLElement.focus() в JS:

Предопределение формата вводимых в поле данных

Пользователям мобильных платформ с виртуальной клавиатурой можно помочь сэкономить время и упростить взаимодействие с формой, если заранее подсказать браузеру, что именно требуется ввести в конкретное поле.

«Некоторые устройства, в частности с виртуальными клавиатурами, могут предоставлять пользователю несколько методов ввода. Например, при вводе номера кредитной карты пользователь захочет видеть только клавиши для цифр 0−9, тогда как при вводе имени предпочтительнее работать с полем, которое автоматически начинает каждое слово с заглавной буквы».

Спецификация HTML

Для этих целей существует атрибут inputmode , сигнализирующий браузеру о том, клавиатуру какого именно формата использовать при вводе данных. Несмотря на большую полезность, из всех браузеров его полноценно поддерживает (включая элементы с contenteditable ) только Google Chrome самых свежих версий, а Opera и Firefox — через флаги.

Атрибут inputmode применяется на с типами text , password , email или url и согласно спецификации содержит следующие возможные значения:

• none — запрет на отображение клавиатуры;
• text — текст, соответствующий языку пользователя;
• tel — телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналог ;
• url — формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналог ;
• email — формат для электронной почты с наличием символа «собака» и точки — аналог ;
• numeric — только цифровая клавиатура — аналог ;
• decimal — цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;
• search — клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.

Кроме вышеперечисленных значений браузеры так же принимают:

• verbatim — дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;
• latin — латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);
• latin-name — latin , но для ввода имён;
• latin-prose — latin , предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);
• full-width-latin — latin-prose с добавлением дополнительных пользовательских языков;
• kana и katakana — служат для ввода текста на японском языке;

Для большей «пуленепробиваемости» атрибут inputmode рекомендуется применять вместе с соответствующим type , который должен отражать семантически верный тип данных, и, если необходимо, pattern , являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:

Перевод вводимых данных в верхний регистр букв

Атрибут autocapitalize позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для , а также для полей с типами text или search и может иметь следующие значения:

• off или none — перевод в верхний регистр не осуществляется (по умолчанию);
• characters — для символов (артикулы, различные коды);
• words — для слов (имена, адреса, названия организаций);
• sentences — для предложений (полезно для , где контент должен представляться как абзац текста);

Например, подобным образом может выглядеть область ввода для контента, который разработчик хочет видеть оформленным как абзац:

Стоит отметить, что как и inputmode , этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами autocapitalize крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.

Добавление готовых вариантов для ввода

Юзабилити полей можно улучшить, если предложить пользователю выбрать заданное значение из списка готовых через атрибут list и дополняющий его элемент . Отличие от традиционного заключается в том, что поле доступно для редактирования и ввода любых значений, а предлагаемые варианты — элементы — показываются либо по желанию пользователя, либо во время ввода при условии частичного совпадения по первым (и далее) символам. Это отличное решение в тех случаях, когда вводимые данные можно предугадать засчёт ограниченного количества вариантов.

Для добавления в поле доступных опций в его атрибуте list указывается идентификатор списка, которым, в свою очередь, должен обладать :

Атрибут широко поддерживается браузерами за исключением Safari, Opera Mini и некоторых других. Для старых версий существует полифилл.

Источник