Как поменять стиль input в css
Перейти к содержимому

Как поменять стиль input в css

  • автор:

Изменить input и стиль текста

Author24 — интернет-сервис помощи студентам

Как изменить стиль label, внутри которого input, средствами CSS?
Крутил-вертел, только стиль самого чекбокса получается зацепить при :checked. HTML поменять никак.

Как изменить стиль текста?
У меня есть основной кликабельный текст с черным цветом,а другой текст я хочу сделать зеленым.

Изменить цвет текста для disabled input в IE8
Есть страница, в упрощенном виде код выглядит так<html> <body> <input >

Изменить стиль текста из кода
Есть TextViev: . <TextView style="@style/MyStyle1" android:id="@+id/MyTextView".

Эксперт JSЭксперт HTML/CSS

3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
Назначайте стили классам
Регистрация: 02.04.2016
Сообщений: 102

mrtoxas,сделал вот так но повился изменённый интпут под стандартным. Если убрать стандартный то видно что новый интпут выполнен как картинка не реагирует на нажатия и тд

1 2 3 4 5 6 7 8 9 10 11
Ваше Имя: br /> p class="cite"> input type="text" name="name" required>/p> Ваша Фамилия: br /> input type="text" name="s_name" required/>br /> Ваш адрес: br /> input type="text" name="address" required/>br /> Почтовый индекс: br /> input type="text" name="post_index" required/>br /> Ваш e-mail: br /> input type="text" name="email" />br required/> /p>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
> P.cite { border: 1px solid #cccccc; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; background: white ; height: 24px; width: 120px; color: black; font-size: 11px; font-family: Tahoma; } >

Эксперт JSЭксперт HTML/CSS

3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4

Лучший ответ

Сообщение было отмечено 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
 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> meta http-equiv="X-UA-Compatible" content="ie=edge"> title>Document/title> style> .form-input < /*Общий класс для всех инпутов*/ display: block; border: 2px solid red; >/*Отельные инпуты:*/ .form-input-name < color: green; >.form-input-surname <> .form-input-address <> .form-input-index <> .form-input-email <> /style> /head> body> form action="" id=""> label>Baше имя: input class="form-input form-input-name" name="name" type="text" required> /label> label>Baша фамилия: input class="form-input form-input-surname" name="surname" type="text" required> /label> label>Ваш адрес: input class="form-input form-input-address" name="address" type="text" required> /label> label>Почтовый индекс: input class="form-input form-input-index" name="post_index" type="text" required> /label> label>Ваш e-mail: input class="form-input form-input-email" name="post_email" type="text" required> /label> /form> /body> /html>

Оформление Input type=»text»

Здравствуйте, возможно ли сменить оформление текстового поля input? Если это возможно, подтолкните в нужное направление. Смотрел в Googl`e, ни чего внятного не нашел. Спасибо.

Отслеживать
задан 13 июл 2012 в 23:17
111 2 2 золотых знака 2 2 серебряных знака 5 5 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Лучше будет учесть все

input[type="text"] < border: 1px solid #cccccc; //цвет рамки border-radius: 3px; //закругление углов (общее) -webkit-border-radius: 3px; //закругление углов (Google Chrome) -moz-border-radius: 3px; //закругление углов (FireFox) -khtml-border-radius: 3px; //закругление углов (Safari) background: #ffffff !important; // желательно прописывать, так как в Chrome при сохранных данных оно может быть желтым outline: none; // удаляет обводку в браузерах хром(желтая) и сафари(синяя) height: 24px; // высота на свое усмотрение width: 120px; // ширина на свое усмотрение color: #cccccc; //цвет шрифта в обычном состоянии font-size: 11px; // Размер шрифта font-family: Tahoma; // Стиль шрифта >

Можно также добавить стиль при на нажатии(фокусе) на поле

input[type="text"]:focus
input[type="text"] 

не обязательно можно просто

input 

тогда свойство будет применено для всех инпатов.

Стилизация input с примерами

Одним из главных элементов на странице являются формы и их оформление довольно тонкий момент при создании сайта. Одни из основных тегов формы — input, label, button, textarea и select.

  • input нужен для текстовых полей, радио кнопок, флажков, а так же для кнопок — reset, file, password и других
  • textarea — текстовая область, в которую можно ввести текст в несколько строк
  • select — это список с возможностью выбора одного значения, либо нескольких. Он может быть как выпадающим, так и статичным
  • label — устанавливает связь между элементами формы
  • button — отправка данных формы. От input type=submit отличается тем, что имеет более расширенные возможности при создании кнопки

Стилизация input

Важно: всем тегам формы необходимо задать атрибут value, его значение отправляется на сервер.

В данной статье мы рассмотрим: как стилизовать форму и все ее элементы при помощи CSS и jQuery. Приступим.

Создадим с вами обыкновенную форму:

input

Вот так он выглядит в HTML

Важно: тег input всегда должен иметь обязательный атрибут — type, с его него, мы говорим нашей форме, что она будет делать — hidden (скрытое поле), radio (переключатель), chekbox (чекбос), text (текст) или file (загрузка файла)

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

input

Стилизация textarea

В HTML он выглядит так:

стандартно textarea имеет следующие параметры:

  • правый нижний угол области текста, можно растянуть мышкой по экрану
  • для IE имеется постоянный scroll (прокрутка)

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

textarea < /* = Убираем скролл */ overflow: auto; /* = Убираем увеличение */ resize: none; width: 300px; height: 50px; /* = Добавим фон, рамку, отступ*/ background: #f6f6f6; border: 1px solid #cecece; border-radius: 8px 0 0 0; padding: 8px 0 8px 10px; >

Готово. Наше поле с текстом стало более красивым. Но мы с вами идем дальше и переходим к radio.

Стилизация input radio

в HTML он выглядит так:

Важно: чтоб radio переключались между собой, необходимо задать группе одинаковый name

Бытует мнение что input не поддается стилизации в CSS, развеем этот миф.

  • Создадим label для того что бы при нажатии на название и «псевдокнопку» сработал radio input.
  • Внутри label создаем input и задаем ему type=radio.
  • После input добавляем пустой div и текст для input.
 

В CSS будем использовать checked, before, а так же + для обращения к соседним селекторам.

/* = стилизуем текст */ label < font-size: 16px; font-weight: 700; cursor: pointer; >/* = скрываем input */ input < display: none; >/* = стилизуем кнопку, которая работает вместе с input */ .stlradio < display: inline-block; border: 2px solid #b2b1b1; width: 16px; height: 16px; position: relative; vertical-align: middle; box-sizing: border-box; margin-right: 4px; border-radius: 300px; background-color:#ffffff; >/* = делаем скрытую точку в нашем div */ .stlradio:before < content: ''; background: #1c1e25; width: 8px; height: 8px; opacity: 0; transition: 0.3s; position: absolute; top: 2px; left: 2px; border-radius: 300px; >/* = включаем точку если input активен */ input:checked + .stlradio:before

В итоге мы получаем вот такой результат

Стилизация input checkbox

в HTML он выглядит так:

Для стилизации checkbox будем использовать такие же манипуляции, как и с radio

Отличается CSS checkbox от radio только отсутствием border-radius

/* = стилизуем текст */ label < font-size: 16px; font-weight: 700; cursor: pointer; >/* = скрываем input */ input < display: none; >/* = стилизуем кнопку, которая работает вместе с input */ .stlchek < display: inline-block; border: 2px solid #b2b1b1; width: 16px; height: 16px; position: relative; vertical-align: middle; box-sizing: border-box; margin-right: 4px; >/* = делаем скрытый квадратик в нашем div */ .stlchek:before < content: ''; background: #1c1e25; width: 8px; height: 8px; opacity: 0; transition: 0.3s; position: absolute; top: 2px; left: 2px; >/* = включаем квадратик если input активен */ input:checked + .stlchek:before

В итоге мы получаем вот такой результат

Стилизация select

Обычно, select описывается в HTML документе так:

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

Приступим. Разметка HTML:

Стилизуем всё это добро

/* = Select */ .slct < display: block; border-radius: 5px; border: 1px solid #cecece; background-color: transparent; text-decoration: none; width: 285px; padding: 10px 15px 10px 10px; color: #fff; background-position: 290px -145px; /* Супер финт обрезаем текст чтобы не вылезал за рамку */ overflow: hidden; white-space:nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; >.slct.active < border-radius: 5px 5px 0 0; border-bottom: none; >.drop < margin: 0; padding: 0; width: 310px; border: 1px solid #cecece; border-top: none; display: none; position: absolute; background: #fff; >.drop li < list-style: none; border-top: 1px dotted #e8e8e8; cursor: pointer; display: block; padding: 4px 15px 4px 25px; background-position: 10px -119px; >.drop li a < color: #444; >.drop li:hover < background-color: #e8e8e8; >.drop li:hover a

собственно сам код скрипта для нашего селекта

// Select $('.slct').click(function()< /* Заносим выпадающий список в переменную */ var dropBlock = $(this).parent().find('.drop'); /* Делаем проверку: Если выпадающий блок скрыт то делаем его видимым*/ if( dropBlock.is(':hidden') ) < dropBlock.slideDown(); /* Выделяем ссылку открывающую select */ $(this).addClass('active'); /* Работаем с событием клика по элементам выпадающего списка */ $('.drop').find('li').click(function()< /* Заносим в переменную HTML код элемента списка по которому кликнули */ var selectResult = $(this).find('a').data('znach'); var selectResultName = $(this).find('a').html(); /* Находим наш скрытый инпут и передаем в него значение из переменной selectResult */ $(this).parent().parent().find('input').val(selectResult); /* Передаем значение переменной selectResult в ссылку которая открывает наш выпадающий список и удаляем активность */ $(this).parent().parent().find('.slct').removeClass('active').html(selectResultName); /* Скрываем выпадающий блок */ dropBlock.slideUp(); >); /* Продолжаем проверку: Если выпадающий блок не скрыт то скрываем его */ > else < $(this).removeClass('active'); dropBlock.slideUp(); >/* Предотвращаем обычное поведение ссылки при клике */ return false; >);

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

  • Красивый(ая)
  • Умный(ая)
  • Коммуникабульный(ая)
  • Скромный(ая)

Стилизация Input file

type=file отображает на странице кнопку, с помощью которой можно выбрать файл. И блок в котором мы видим сам выбранный файл. Давайте рассмотрим стилизацию input file.

Создаем разметку следующего характера

 
/* = File Load */ /* Стили для контейнера */ .file-load-block < width: 310px; height: 35px; overflow: hidden; position: relative; >/* работаем с инпутом который конкретно file */ .file-load-block input[type=file] < /* делаем кроссбраузерную прозрачность */ opacity: 0; filter: alpha(opacity=0); /* Позиционируем абсолютно отсносительно контейнера по правому краю */ position: absolute; top: 0; right: 0; /* Задаем высоту и делаем шрифт огромным для того чтобы кнопка "обзор" занимала все пространство контейнера */ height: 35px; font-size: 600px; /* Ставим наш инпут поверх всего содержимого */ z-index: 2; cursor: pointer; width: auto; >/* Стилизируем инпут и кнопку которые под загрузчиком */ .file-load-block input[type=text] < z-index: 1; width: 206px; padding-right: 10px; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #ccc; background: #fff; color: #000; -o-text-overflow: ellipsis; padding: 5px 15px; border-radius: 5px; >.file-load-block button < position: absolute; right: 0; top: 0px; width: 90px; height: 28px; border: 1px solid #ccc; background: #fff; color: #666; border-radius: 5px; box-shadow: inset 0 2px 2px #ccc; >.file-load-block .button-hover

Здесь я воспользовался небольшим хаком) обычный input делаем невидимым с помощью opacity. И задаем шрифт большого размера, наша кнопка станет большой и закроет весь container.

Под input который выводит загрузочный popup, расположим input. Он будет выводить название файла, который загружаем на сервер и кнопку выбора файла.

Добавим немного script’a. Он будет показывать название нашего файла, который прикрепили, добавим hover для кнопки когда input получает фокус:

// = Load // отслеживаем изменение инпута file $('#file').change(function()< // Если файл прикрепили то заносим значение value в переменную var fileResult = $(this).val(); // И дальше передаем значение в инпут который под загрузчиком $(this).parent().find('.fileLoad').find('input').val(fileResult); >); /* Добавляем новый класс кнопке если инпут файл получил фокус */ $('#file').hover(function()< $(this).parent().find('button').addClass('button-hover'); >, function()< $(this).parent().find('button').removeClass('button-hover'); >);

Стилизация текстовых полей формы

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

Введение

Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.

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

Стилизация формы выполняется через CSS. В этом руководстве остановимся и подробно рассмотрим различные варианты оформления её текстовых полей .

Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».

Нормализация стилей

1. Настройка box-sizing .

Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box :

*, *::before, *::after { box-sizing: border-box; } 

В этом случае браузер при рассчитывании ширины и высоты элементов будет включать в них поля (padding) и границы (border). Как правило, это сильно упрощает работу с размерами элементов, и избавляет нас от множества проблем при размещении контента.

2. Нормализация стилей .

Для того чтобы в разных браузерах отображался как можно более одинаково необходимо добавить следующее:

/* 1 – Изменим стили шрифтов */ /* 2 – Удалим margin в Firefox и Safari */ input[type="text"] { font-family: inherit; /* 1 */ font-size: inherit; /* 1 */ line-height: inherit; /* 1 */ margin: 0; /* 2 */ }

Базовый вариант оформления input

Для удобного добавления к элементам стилей создадим следующую HTML-разметку:

  

Т.е. добавим к с type=»text» класс text-field__input , к – text-field__label , а затем обернём их в элемент с классом text-field .

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

/* установим отступ 1rem от нижнего края элемента */ .text-field { margin-bottom: 1rem; } /* стили для label */ .text-field__label { display: block; margin-bottom: 0.25rem; } /* стили для input */ .text-field__input { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #bdbdbd; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

Примененные CSS свойства к элементу , и то, что они делают:

  • display: block – устанавливает блочное отображение;
  • width: 100% – занимает всю доступную ширину;
  • height: calc(2.25rem + 2px) – высота элемента определяется путём сложения 2.25rem ( font-size * line-height + padding-top + padding-bottom ) и 2px (ширина верхней и нижней границы);
  • margin: 0 – убирает margin отступы;
  • padding: 0.375rem 0.75rem – внутренние поля: сверху и снизу – 0.375rem, а слева и справа – 0.75rem;
  • font-family: inherit – чтобы шрифт был такой как у родительского элемента, а не тот который браузер по умолчанию назначает для ;
  • font-size: 1rem – устанавливает явный размер шрифта, иначе будет браться из стилей браузера для ;
  • font-weight: 400 – задаёт начертание шрифта;
  • line-height: 1.5 – высота строки (1.5 * размер шрифта);
  • color: #212529 – цвет шрифта;
  • background-color: #fff – цвет фона;
  • background-clip: padding-box – указывает, что фон (фоновое изображение) нужно рисовать только до внешнего края отступа (под границей не выводить);
  • border: 1px solid #bdbdbd – устанавливает границу, у которой: 1px (толщина), solid (тип линии) и #bdbdbd (цвет);
  • border-radius: 0.25rem – радиус скругления углов;
  • transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out – выполняет изменение значений свойств border-color и box-shadow с анимацией длительностью 0.15 секунд посредством временной функцией ease-in-out .

В результате получили следующее оформление:

Базовый вариант стилизации текстовых input

Стилизуем плейсхолдер . По умолчанию плейсхолдер отображается полупрозрачным или светло-серым цветом. Получить его можно с помощью ::placeholder . Оформим его следующим образом:

.text-field__input::placeholder { color: #212529; opacity: 0.4; }

Стилизация плейсхолдера в input

Стили для в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus ):

.text-field__input:focus { color: #212529; background-color: #fff; border-color: #bdbdbd; outline: 0; box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25); }

Стилизация input в состоянии фокуса

Оформление , когда он находится в состоянии disabled и readonly :

      

Стилизация input в состоянии disabled и readonly

Этот набор стилей будет у нас отправной точкой для создания других.

input с иконкой

Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.

Для этого дополнительно обернём элемент в с классами text-field__icon text-field__icon_email :

   

Первый класс ( text-field__icon ) будем использовать для того, чтобы установить относительное позиционирование ( position: relative ). Это действие позволит нам разместить иконку в нужном месте относительно input , используя уже абсолютное позиционирование ( position: absolute ). Второй класс ( text-field__icon_email ) будет определять иконку, которую мы хотим вставить.

.text-field__icon { position: relative; } .text-field__icon::before { content: ''; color: #bdbdbd; position: absolute; display: flex; align-items: center; top: 0; bottom: 0; left: 0.625rem; top: 50%; transform: translateY(-50%); } .text-field__icon .text-field__input { padding-left: 2rem; } /* email значок */ .text-field__icon_email::before { content: '@'; } /* иконка лупы */ .text-field__icon_search::before { width: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bdbdbd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }

Первый вариант вставки иконки в input

Ещё один вариант оформления:

Второй вариант вставки иконки в input

input с активной svg-иконкой

В этом примере поместим в input иконку, на которую можно нажать.

 

Для этого мы также как и в предыдущем примере обернули в . . Саму svg-иконку обернули в с классом text-field__aicon и поместили рядом с .

Оформление выполнили так:

.text-field__icon { position: relative; } .text-field__icon input { padding-right: 2.5rem; } .text-field__aicon { position: absolute; display: flex; align-items: center; top: 0; bottom: 0; right: 0.875rem; width: 1rem; cursor: pointer; color: #bdbdbd; transition: color 0.15s ease-in-out; } .text-field__aicon:hover { color: #212529; }

Вариант стилизация input с активной иконкой

Ещё пример вставки иконки в input :

Ещё один вариант стилизация input с активной иконкой

input с кнопкой

HTML-разметка input с кнопкой:

 

Расположение кнопки справа от input выполним с помощью флексов:

.text-field__group { display: flex; } /* кнопка */ .text-field__btn { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: #eee; border: 1px solid #bdbdbd; padding: .375rem .75rem; font-size: 1rem; border-radius: .25rem; transition: background-color .15s ease-in-out; } .text-field__btn:hover { background-color: #bdbdbd; } .text-field__group .text-field__input { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 2; } .text-field__group .text-field__btn { position: relative; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }

Пример оформления input с кнопкой

input с плавающим label

Разметка input с плавающим label:

 

Когда указано значение value:

.text-field_floating { position: relative; } .text-field_floating .text-field__input { height: calc(3.5rem + 2px); line-height: 1.25; padding: 1rem 0.75rem; } .text-field_floating .text-field__label { position: absolute; top: 0; left: 0; height: 100%; padding: 1rem .75rem; pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity .15s ease-in-out, transform .15s ease-in-out; } .text-field_floating .text-field__input::-moz-placeholder { color: transparent; } .text-field_floating .text-field__input::placeholder { color: transparent; } .text-field_floating .text-field__input:focus, .text-field_floating .text-field__input:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: .625rem; } .text-field_floating .text-field__input:focus~.text-field__label, .text-field_floating .text-field__input:not(:placeholder-shown)~.text-field__label { opacity: .65; transform: scale(.85) translateY(-.75rem) translateX(.15rem); }

Пример оформления input с плавающим label

Ещё один вариант с «плавающей» меткой:

Пример оформления input с плавающим label

Пример оформления input с плавающим label

input со счётчиком символов

Пример в котором под input отображается количество набранных символов и максимальная длина:

Пример оформления input со счётчиком символов

Это выполняется посредством следующего кода:

   

Стили для отображения состояния валидации input

Применить стили в зависимости от состояния поля в CSS можно с помощью специальных псевдоклассов. Например, :valid позволяет выбрать валидные элементы, а :invalid — не валидные.

.text-field__input:invalid, .text-field__input:valid { border-color: #dc3545; padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5625rem center; background-size: 1.125rem 1.125rem; } .text-field__input:valid { border-color: #198754; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); } .text-field__input:invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .text-field__input:valid:focus { border-color: #198754; box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%); }

Но, если вы хотите контролировать этот процесс и добавлять стили с помощью JavaScript, то тогда лучше это делать через классы. Например, использовать класс text-field__input_valid при успешной валидации, а text-field__input_invalid — при не успешной. Их следует добавлять к .

 
Укажите город.
Отлично!

Отображать сообщения пользователю или подсказки можно через

.

.

Пример оформления input для отображения состояния валидации

Пример оформления input для отображения состояния валидации

Пример оформления input для отображения состояния валидации

Пример оформления input для отображения состояния валидации

Пример валидации формы с помощью JavaScript

Валидацию элементов формы будем осуществлять с помощью функции checkValidity() . После этого, в зависимости от её результата, будем добавлять той или иной класс к , а также сообщение ( input.validationMessage ) в элемент .text-field__message .

// input - переменная, содержащая элемент if (input.checkValidity()) { input.classList.add('text-field__input_valid'); input.nextElementSibling.textContent = 'Отлично!'; } else { input.classList.add('text-field__input_invalid'); input.nextElementSibling.textContent = input.validationMessage; } 

Т.к. мы будем сами отображать сообщения, то необходимо отключить стандартные подсказки браузера. Для этого к тегу необходимо добавить атрибут novalidate :

Клиентская проверка формы после нажатия «Отправить»:

Пример оформления input для отображения состояния валидации

Пример валидации формы в реальном времени:

Пример валидации формы в реальном времени на клиенте

Отображение только ошибок:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *