Подсветка поля ввода css

Проверка ввода данных

Рассмотрим пример проверки правильности ввода данных через HTML, с подсветкой CSS, а затем дополнительно сделаем валидацию с помощью JavaScript.

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

Пример: для программ типа калькулятора нужно вводить числа, чтобы производить с ними различные вычисления и нужна проверка (валидация) на то, что пользователь ввёл числа, а не буквы или символы.

Для ввода данных служит элемент input, у него и будем проверять валидацию.

Валидация input через HTML происходит с помощью атрибута pattern.

Примеры атрибута «pattern»

Только русские слова

type=»text»
title=»Разрешено использовать только пробелы и русские буквы»
pattern=»^[А-Яа-яЁё\s]+$»
/>

Только латинские слова

type=»text»
title=»Разрешено использовать только пробелы и латинские буквы»
pattern=»^[a-zA-Z\s]+$»>

Только русские или латинские слова с пробелами, не менее 6 символов

type=»text»
title=»Разрешено использовать только пробелы и русские или латинские буквы, не менее 6″
pattern=»^[A-Za-zА-Яа-яЁё\s]»>

Введите телефон в формате: +7 (777) 777-77-77 (Россия)

type=»tel»
title=»Используйте формат: +7 (777) 777-77-77″
pattern=»[+]7\s[\(]\d[\)]\s\d[\-]\d[\-]\d»>

Атрибут required делает заполнение поля обязательным.

Атрибуты minlength, maxlength задаёт минимальное и (или) максимальное допустимое количество символов. Например minlength=»6″.

Пример валидации на HTML

Использование CSS при валидации

/* Верный ввод */
input:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод */
input:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе */
input:focus:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе */
input:focus:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid border-color: red;
color: red;
box-shadow: none;
>

Введите число ОТ 10 ДО 999

Введите что нибудь и щёлкните вне элемента INPUT.

Элемент подсвечивается красным если он пустой или ввод не валидный, в нашем случае в атрибуте pattern задан ввод только чисел, любой символ или буква будет подсвечивать красным, сообщая об ошибке.

Пустое поле подсвечивает красным цветом атрибут required который сигнализирует что поле обязательно для заполнения.

Атрибуты minlength=»2″ maxlength=»3″ следят за тем, чтобы было введено от двух до трёх символов. Один символ, подсветка останется красной. Больше трёх символов ввести не удаться.

При правильном вводе, красная подсветка исчезнет, а введённые числа станут зелёными.

Пример валидации на JavaScript

Проверка заполнения формы

JavaScript

function validateForm() var x = document.forms[«myForm»][«fname»].value;
if (x == «») alert(«Необходимо ввести имя»);
return false;
>
>

html

Пример

Проверка ввода чисел

JavaScript

function myFunction() var x;
var text = «Все в порядке»;

if (isNaN(x) || x 10) text = «Ввод не верен»;
>
document.getElementById(«demo»).innerHTML = text;
>

html

Пример

Необычный способ проверки валидности email.

JavaScript

function myFunction() const email = document.getElementById(«mail»);

email.addEventListener(«input», function (event) if (email.validity.typeMismatch) email.setCustomValidity(«Введите корректный email»);
> else email.setCustomValidity(«»);
>
>);

html

Пример

Остальные проверки валидации на JS

var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) printError(«nameErr», «Пожалуйста, введите правильное имя»);

var regex = /^9\d$/;
if(regex.test(mobile) === false) printError(«mobileErr», «Пожалуйста, введите действительный 10-значный номер мобильного телефона»);
>

Источник

Создаем эффект свечения для полей HTML форм при помощи CSS

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

Сейчас мы создадим такой же эффект анимации при помощи свойства transition и эффект свечения при помощи свойства box-shadow.

Результат того, что может получиться, вы можете видеть на изображении ниже или зайдя на страницу входа в Твиттер.

Для начала зададим полям формы анимацию:

С помощью свойства transition мы создадим анимацию, чтобы свечение возникало плавно, в то время когда поле формы становится активным. Кроме этого здесь мы используем свойство outline чтобы убрать свечение для браузеров Safari и Chrome, в которых данный функционал предусмотрен по умолчанию.

Теперь, кода мы все подготовили, можно приступать к созданию эффекта свечения, при помощи свойства box-shadow, которым задается тень различным объектам. Но у нас свечение не будет выглядеть как тень, потому что мы будем использовать ярко-синий цвет. Кроме этого, мы используем RGB коды цветов, так мы сможем регулировать уровень прозрачности. Значения HTML и RGB кодов цветов, вы сможете найти в таблице HTML кодов цветов.

Кроме свечения можно скруглить углы поля формы, при помоши свойства border-radius.

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

border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;

В результате у вас должно получиться, что-то вроде этого:

Весь код будет выглядеть так:

Источник

Подсветка поля input в Chrome

Подсветка у input
При нажатии на поле ввода, оно приобретает своеобразную синюю подсветку. Мне нужно сделать так.

Проверка и подсветка input
Добрый день. Подсвечивает, но подсвечивает только один инпут, если его заполнить — подсвечивает.

Html form подсветка input
Добрый вечер. Что за ерунда происходит с input, когда ставлю курсор туда, вокруг него появляется.

Подсветка кнопки при focus на input поле
Возможно ли сделать чисто на CSS подсветку кнопки, если на рядом стоящий input поставить focus?

_BoGdaN_, вы знаете что обозначает звездочка? Вы предлагаете применить этот стиль ко всем элементам на странице? Не надо так делать.

Egor.V.A, по всей видимости у Вас где-то перекрываются стили — либо просто не подключены, возможна ошибка в написании стилей, если не помогает. А помочь точно должно, ищите ошибку.

Сообщение от mrtoxas

_BoGdaN_, вы знаете что обозначает звездочка? Вы предлагаете применить этот стиль ко всем элементам на странице? Не надо так делать.

mrtoxas, я написал если подсвечивание вовсе не нужно, то есть на всей странице.(Да я знаю, что обозначает звездочка)

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

*{margin:0; padding:0; img: border: none;} /* Сброс настроек по умолчанию */ body {background: #f2f2f2;} /* Цвет фона*/ .main { background: #ffffff; /* Цвет фона */ min-width: 1000px; /* Ширина */ max-width: 1100px; margin: 0 auto; /* Выравнивание по центру */ } .header {overflow: hidden;} /* Отображение внутренней области */ .logo { float: left; /* Выравнивание по левому краю картинки логотипа*/ margin: 5px 0 0 35px; /* Внешние отступы картинки логотипа */ } .slogan {margin: 40px 0 6px 30px;} /* Отступы картинки слогана */ .head-contact { float: right; /* Выравнивание по правому краю */ background: #f8fafb url(../images/phone-clock.gif) 253px 12px no-repeat; /* Цвет фона + картинка*/ border: 2px solid #e8eff4; /* Цвет рамки*/ border-radius: 0 0 10px 10px; /* Закругление углов блока */ text-align: right; /* Выравнивание текста по правому краю */ margin: 0 7px 0 0; /* Внешние отступы */ padding: 10px 65px 10px 14px; /* Внутренние отступы */ } .head-contact p { font: normal 12px/1.3 Verdana; margin: 0 0 3px 0; } .head-contact p strong { font-size: 14px; font-weight: 100; } .head-contact p span { font-size: 21px; font-weight: 900; } .searh-head { float: right; background: url(../images/bg-search.gif) no-repeat left top; width: 305px; height: 29px; margin: 7px 7px 0 0; } #quickquery { border: none; margin: 5px 5px 5px 8px; width: 225px; font-size: 12px; outline: none; } #quickquery:visited { border: none; } .search-btn {margin: 8px 0 0 15px;}

Источник

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

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

В данном случае для реализации стиля подсветка текста CSS недостаточно, поэтому мы будем использовать еще и JavaScript. Так что, я исхожу из того, что у вас есть базовые знания по SCSS и React. Вот полный код на CodePen:

Давайте создадим это!

Сначала мы создадим простой компонент React и перенесем его в DOM:

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Добавим HTML-контейнер для ReactDOM, чтобы отобразить его:

В результате мы получим базовый элемент ввода с нижней границей.

Теперь давайте оживим границу!

Трудность с реализацией подсветки заключается в том, что она должна изменять границу на уровне с вводимым текстом. Она также должна работать с любыми font-family и font-size.

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

Предположим, мы можем использовать второй элемент с динамической шириной — в нашем примере это будет элемент span с классом input-highlight. Затем мы скопируем вводимый текст и поместим его внутри span. Я задал контролируемый ввод текста, предоставив свойство value. Теперь наш компонент React выглядит следующим образом:

Источник