• Страница 1 из 1
  • 1
Форум » Территория вебмастера » Начинающему вебмастеру » Эффект подсветки для поля с проверенным вводом (Создаем эффект свечения для полей при помощи CSS)
Эффект подсветки для поля с проверенным вводом
Kosten
Дата: Пятница, 09.02.2018, 23:51 | Сообщение 1
Администраторы
Сообщений:18086
Награды: 55


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

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

Предполагая, что ваш HTML выглядит примерно так: поле ввода и тег метки:

Код
<input id="checkbox1" type="checkbox" />
<label for="checkbox1">Checkbox Label Text</label>

Затем ваш CSS для добавления выделенного эффекта на метку любого введенного флажка, который был отмечен, должен выглядеть следующим образом:

Код
input:checked + label{
background: #78f0f4;
}




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



Интересно стало проверить, то вот так получилось, здесь только стиль прописал в CSS.

Резюме:

Сегодня с тривиальной дополнительной работой мы можем значительно уменьшить количество ошибок, которое испытывают ваши пользователи при заполнении веб-форм. Просто используя соответствующий тип ввода и обеспечивая обратную связь в реальном времени о данных, которые они предоставили, может сделать разницу между завершенной транзакцией и потерянным клиентом.
Прикрепления: 6021994.png(28.1 Kb) · 2233187.png(13.4 Kb)
Страна: (RU)
Форум » Территория вебмастера » Начинающему вебмастеру » Эффект подсветки для поля с проверенным вводом (Создаем эффект свечения для полей при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: