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

Оформление 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

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

Отслеживать
ответ дан 5 авг 2012 в 11:02
1,665 5 5 золотых знаков 35 35 серебряных знаков 73 73 бронзовых знака

Для всех Input с type=»text»

input[type="text"]

Отслеживать
ответ дан 14 июл 2012 в 8:01
1,131 1 1 золотой знак 9 9 серебряных знаков 24 24 бронзовых знака

Можно. В css пишешь стиль, а input’у присваивашь нужный класс. Вот пример из админки DLE. В CSS

.edit < border:1px solid #9E9E9E; color: #000000; padding: 3px; margin-top: 2px; margin-bottom: 2px; font-size: 11px; font-family: Verdana; background: #FFF; >.bk < background:#fff url(images/shadow.png) repeat-x; >

Ну и к input ‘у пишешь:

Отслеживать
4,966 10 10 золотых знаков 33 33 серебряных знака 62 62 бронзовых знака
ответ дан 14 июл 2012 в 0:10
75 8 8 бронзовых знаков
@Morty, Чтобы отформатировать код, выделите его мышью и нажмите на кнопку 101010 редактора.
14 июл 2012 в 6:08

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как задать стиль submit и input text:

Делал все по заданию, на последнем шаге (написание отдельного стиля submit и input text) прописывал код указанный на 6 минуте 25 секунде видеоурока№8.6 CSS/HTML но стиль кнопки и поля тект не изменяется. Перепроверял код, пытался переписать заново, но результат тот же. Ссылка с результатом приложена ниже.

Киномонстр - лучшие фильмы здесьКиномонстр
Кино - наша страсть
Главная
  Фильмы
  Сериалы
  Рейтинг фильмов
  Контакты

Поиск
Вход
забыли пароль?регистрация
Новости
04.02.2021мы запустили расширенный поиск
читать
Рейтинг фильмов

  Интерстеллар8.1
  Матрица7.8
  Безумный Макс7.5
  Облачный атлас7.0

Интерстеллар:
Рейтинг:8.1/10Год:2014Режиссер:Кристофер Нолан
Описание фильма:
Когда засуха приводит человечество к продовольственному кризису, коллектив исследователей и ученых отправляется сквозь червоточину (которая предположительно соединяет области пространства прошлое и будующее) в путешествие чтобы превзойти прошлые ограничения космических путешествий человека и переселить человечество на другую планету.
Отзывы о фильме:
Сергей:
Отличный фильм, 3 часа на одном дыхании.
Дмитрий:
Фильм оставил приятное впечатление, отчасти даже шокировал. Актерская игра на высшем уровне, сюжет лихо закручен.
Главная | Фильмы | Сериалы | Рейтинг фильмов | Контакты
Kinomonstr.com

 * < margin: 0; padding: 0; >body < font-size: 1.2em; background-color: #fff; color: #555; >p < padding: 0 0 20px 0; line-height: 1.5em; >input[type="text"], input[type="password"], input[type="search"] < color: #5d5d5d; width: 60%; padding: 8px; >input, textarea < outline: none; border: none; border: solid 1px #f2f2f2; >h1,h2 < font: normal 170% "century gothic", arial; margin: 0 0 15px 0; padding: 15px 0 5px 0; color: #000; >h2 < font-size: 140%; >a, a:hover < outline: none; text-decoration: underline; color: #aeb002; >ul < margin: 2px 0 22px 17px; >ul li < margin: 0 0 6px 0; padding: 0 0 4px 5px; line-height: 1.5em; >.header < background-color: darkslateblue; height: 177px; font-size: 0,8em; margin-left: 0px; margin-right: 0px; min-width: 900px; >.main, .logo, .menubar, .site_content, .footer < margin-left: auto; margin-right: auto; >.logo < width: 880px; padding-bottom: 40px; >.logo h1, .logo h2 < font: normal 300% "century gothic", arial, sans-serif; margin: 0 0 0 9px; >.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover < padding: 22px 0 0 0; color: #fff; letter-spacing: 0.1em; text-decoration: none; >.logo_text h2 < font-size: 0.9em; padding: 4px 0 0 0; color: #999; >.menubar < width: 900px; height: 46px; >ul.menu < float: right; >ul.menu li < float: left; padding: 0 0 0 9px; list-style: none; margin: 1px 2px 0 0; >ul.menu li a < font: normal 100% "trebuchet ms", sans-serif; display: block; height: 20px; padding: 20px 35px 5px 28px; color: #fff; text-decoration: none; >ul.menu li.selected a < color: #aeb002; >ul.menu li a:hover < color:#e4ec04; >hr < border: solid 1px #f3f3f3; >.site_content < width: 880px; overflow: hidden; margin: 20px auto 0 auto; background-color: white; >.sidebar_container < float: right; width: 224px; >.sidebar < float: right; width: 222px; padding: 5%; margin: 20px 0 16px 0; border: solid 1px #f2f2f2; border-radius: 20px; background-color: #f9f9f9; >.btn < padding: 8px; background-color: white; cursor: pointer; border: solid 1px white; border-radius: 5px; >.sidebar h2 < color: #136cb2; >.lables_passreg_text < font-size: 0.7em; margin-top: 3%; margin-left: 2%; >.sidebar ul < margin: 0; >.sidebar ul li < list-style-type: none; margin: 0 0 0 0; >.sidebar .rating_sidebar < float: right; >.content < text-align: left; width: 620px; padding: 0 0 0 5px; float: left; >.content a < text-decoration: none; >.films_block < margin-bottom: 5%; >.films_block img < border: solid 5px #dad7d5; border-radius: 5px; width: 22%; >.posts .posts_content < font-size: 0.8em; text-align: justify; >.info_film_page < margin-top: 2%; margin-bottom: 4% >.info_film_page .label < font-size: 1.2em; >.info_film_page .value < font-size: 1em; color: #49945a; margin-right: 3%; >.description_film < margin-bottom: 15%; >.description_film img < float: left; margin-right: 2%; border-radius: 5px; border:solid 5px #dad7d5; >.reviews < margin-bottom: 4%; font-size: 0.9em; >.reviews .review_name < background-color: #7268ad; color: white; padding: 1%; border-top-left-radius: 5px; border-top-right-radius: 5px; >.reviews .review_text < padding: 2% 0 2% 2%; >.send < margin-bottom: 4%; >.send input [ type="text" ], textarea < border: solid 1px #c3c3c3; margin-bottom: 2%; >.send input [type="text"] < width: 98%; >.send textarea < width: 624px; height: 200px; >.send input [type="submit"] < background-color: #7268ad; padding: 3%; color: white; border-radius: 5px; >.footer < width: 100%; height: 100px; padding: 28px 0 5px 0; text-align: center; background-color: darkslateblue; color: #a8aa94; margin-left: 0px; margin-right: 0px; min-width: 900px; >.footer a < color: #a8aa94; text-decoration: none; >.footer a:hover < color: #fff; text-decoration: none; >.footer p

Как стилизовать поле для отправки файла

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

Конечно, как обычно есть несколько путей решить эту задачу. Это:

Использовать фреймворк, такой как Bootstrap, Foundation и подобные.
Попробовать самостоятельно стилизовать при помощи JS и CSS.
Воспользоваться плагином для стилизации поля с типом «file».

Стилизация поля input с типом file

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

Остается попробовать самостоятельно привести все в порядок или воспользоваться плагином. Давайте остановимся на этих 2 вариантах подробнее, чтобы у вас больше не возникало вопросов как всё-таки стилизовать тег input с атрибутом type=file. Я подробно опишу вариант самостоятельной стилизации, а в конце дам ссылку на плагин, который делает практически тоже самое.

Самостоятельная стилизация тега input с типом «файл»

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

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

Итак, обычно я оборачиваю все инпуты и элементы, которые относятся к ним в общий контейнер. Мне так удобней, легче верстать, позиционировать и стилизовать.

Как я уже и говорил, мы будем отслеживать клик по label, который связан с инпутом, при этом само поле, которое предназначено для отправки файла мы скроем, задав ему прозрачность «0».

 Выберите файл

Вот так сейчас выглядит поле в браузере:

Добавим стили, чтобы получить описываемый результат. То есть скроем input, оставим только label, поместим в него иконку и сделаем его похожим на обычную кнопку, но сначала, добавим кое-что в верстку:

Теперь добавим стили:

.input__wrapper < width: 100%; position: relative; margin: 15px 0; text-align: center; >.input__file < opacity: 0; visibility: hidden; position: absolute; >.input__file-icon-wrapper < height: 60px; width: 60px; margin-right: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-right: 1px solid #fff; >.input__file-button-text < line-height: 1; margin-top: 1px; >.input__file-button

Вот что получилось:

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

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

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

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

.field__wrapper < width: 100%; position: relative; margin: 15px 0; text-align: center; >.field__file < opacity: 0; visibility: hidden; position: absolute; >.field__file-wrapper < width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; >.field__file-fake < height: 60px; width: calc(100% - 130px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 15px; border: 1px solid #c7c7c7; border-radius: 3px 0 0 3px; border-right: none; >.field__file-button

Как видите, все не очень сложно, плюс, без jQuery, так что если у вас она уже не используется, то можно не тянуть ее за собой, ради такого скромного функционала.

Стилизация «input type file» при помощи плагина

Теперь давайте рассмотрим вариант стилизация поля для отправки файла при помощи jQuery плагина. Называется он jQuery Fileinput. Как я уже говорил, делает он практически тоже самое, просто автоматически.

Для настройки сначала подключаем сам плагин и jQuery:

Затем создаем input:

И инициализируете плагин:

После инициализации сам инпут скроется, а на его месте появится кнопка.

Чтобы задать ей свой класс и поместить в нее свой текст, нужно передать в fileinput html. Например так:

Для наглядности, смотрите пример на jsfiddle, а на сегодня все. Надеюсь, что у вас больше не осталось вопросов по поводу того, как стилизовать input с type fifle.

05/10/2022 Дмитрий Давыдов

13 комментариев

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

Здравствуйте. Не работает смена текста и вывод подсчитанных файлов в связке с плагином multifile-upload-field-for-contact-form-7 — может есть предположения как это можно исправить?

Что делает multifile-upload-field-for-contact-form-7? Если просто добавляет enctype=’multipart/form-data’, то попробуйте добавить этот параметр скриптом обычным, а не плагином.

Отличная стилизация Input. Давно искал такой вариант дизайна. Но при попытке передать файл на сервер, у меня появилась ошибка «Не удалось открыть поток: отказано в доступе». Что я сделал?
Я загуглил эту тему и вот что нашел. Может кому то пригодиться.
1. Узнайте код ошибки php. Поместите этот код в начало файла php.

ini_set('error_reporting', E_ALL); ini_set('display_errors', 1); ini_set('display_startup_errors', 1);

2. К папке должен быть доступ 777. Проверь это.
3. Тег form должен иметь атрибут enctype = «multipart/form-data» method = «post». 4. Полностью открой и посмотри массив $ _FILES на сервере.

print_r($_FILES);

5. Открой и посмотри массив $ _FILES на клиенте.

file = document.getElementById("get_avatar").files[0];parts = file.name.split('.'); var a = file.size;var b = parts.pop();var c = file.type;alert(a+b+c);

6. Проверь права пользователя и группы пользователей на каталог.

cd /var/www/your_site/user ls -l

Подробнее: __http://profi.spage.me/php/check-file-input-on-php-and-jquery-why-error
Дмитрий Давыдов

Aleksey, спасибо, что не оставили без внимания и дали такой развернутый ответ. Кому-то обязательно пригодится!

Доброго времени суток. Оформил по данному примеру кнопку отправки.
Прошу прощения за, может быть, тупой вопрос, но.
Как получить вложенные файлы на почту? Если с остальными полями понятно
[tel* tel-136] выведет телефон который введет пользователь и т.д.
Но что в данном случае вставить в поле «Прикрепленные файлы», чтобы файл пришел на почту?
Еще раз прошу прощения, за может быть примитивный вопрос.

Добрый день sn_eg, несколько я понял, вы хотите отправить email с вложением. При помощи input file мы получаем файл от пользователя и загружаем его к себе на сервер в папку. Выше есть код. А что бы отправить email с этим файлом из этой папки с сервера, надо делать php код отправки email с вложенным файлом. Вот здесь есть пример: http://www.php.su/articles/?cat=examples&page=060
Если вы делаете отправку email с сервера первый раз. То разберите сперва пример попроще. PHP отправка email с сервера (загуглите пример). А затем если получится, email с вложением.

Я впервые сталкиваюсь вообще с отправкой файлов с формы. Все сделал по инструкции с поста, но так и не понял в какой папке хранятся файлы отправленные с формы cf7. На самом деле, проблема была только в стилизации кнопки отправки файлов, но более разумного решение, чем тут, не нашел. И стилизовал так как нужно, но столкнулся с рядом вопросов, с которыми ранее не сталкивался. В какую папку сохраняются файлы? Где их можно найти? Тыкните носом, пожалуйста.

Я понял вас, здесь нет кода. Код этого примера, вот здесь: https://profi.spage.me/php/check-file-input-on-php-and-jquery-why-error/
Там есть такие строчки:
$name_file_avatar = $_FILES[‘myfile’][‘name’];
////—-еще код—-///
$tmp_dir = $_FILES[‘myfile’][‘tmp_name’];
$destiation_dir = ‘/var/www/spage.me/html/user/download/’.$name_file_avatar;
move_uploaded_file($tmp_dir, $destiation_dir ); 1.Узнаем имя файла.
2.Берем сам файл.
3.Путь (папка) на сервере куда будет скопирован файл.
4.Перемещаем файл с браузера на сервер. Если есть трудности, напишите мне пожалуйста в VK https://vk.com/alekseyvanin
Я чем смогу, помогу!

Спасибо большое. Как доберусь до ноута, посмотрю/попробую.

Здравствуйте. подскажите на счет ошибки. у меня скрипт добавлен к форме с валидацией. сначала отработало, потом стало ошибку выдавать Uncaught TypeError: Cannot read properties of null (reading ‘innerText’) и ругается на forEach.
в сайт после добавление вносились правки. но совсем мелкие. типа на jquery парочка классов была навешана. и хз чего перестало отрабатывать. вроде все осталось как было

Здравствуйте, сложно ответить как решить эту проблему, мало данных. Надо смотреть на сайте, в консоле отладки кода. Желательно ещё иметь доступ к папке сайта, что бы править код. Если хотите, скажу своему помощнику он отладит код.

Алексей, Спасибо за быстрый ответ. В результате долгий тыканий удалось найти проблему. Она была в параметре nextElementSibling. Поскольку параметр отвечает за выборку предыдущего элемента формы, пошел косяк. В форме просто добавили доп поле с текстом.

Стилизуем формы при помощи CSS: руководство для начинающих

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «How to style forms with CSS: A beginner’s guide».

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

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

И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.

А вот та же форма, в оформлении которой использовали каскадные таблицы стилей.

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

Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.

Определение размеров формы (box-sizing).
Селекторы CSS для элементов ввода (input).
Базовые методы стилизации для текстовых полей ввода.
Стилизация прочих полей ввода.
Псевдоклассы UI.
Элементы ввода, недоступные для кастомизации.

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

1. Устанавливаем box-sizing

Я обычно устанавливаю * не только для форм, но и для веб-страниц. Благодаря этому ширина (width) всех элементов будет содержать внутренние отступы (padding).

.some-class

Ширина .some-class без box-sizing:border-box будет больше 200px, что может стать проблемой. Поэтому большинство разработчиков используют border-box для всех элементов.

Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.

*, *:before, *:after

Совет: универсальный селектор * выбирает все элементы в документе.

2. Селекторы CSS для элементов ввода

Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.

input[type=text] < // input elements with type="text" attribute >input[type=password] < // input elements with type="password" attribute >

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

.signup-text-input < // styles here >

3. Базовые методы стилизации для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного текстового поля с плейсхолдером.

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

Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:

Padding (внутренние отступы)
Margin (внешние отступы)
Border (граница)
Box shadow (тень блока)
Border radius (для скругления границ)
Width (ширина)
Font (шрифт)

Давайте пройдемся по каждому из этих свойств.

Padding

Добавление некоторого внутреннего пространства может повысить четкость. Чтобы это сделать, применяем свойство padding.

input[type=text]

Margin

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

input[type=text] < padding:10px; margin:10px 0; // add top and bottom margin >

Border

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

.border-customized-input
.border-removed-input

Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.

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

.border-bottom-input < border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border >

Box shadow

Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.

input[type=text]

Border radius

Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.

.rounded-input

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы установить ширину поля ввода.

input

Font

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

input, textarea

4. Стилизация прочих типов полей ввода

Вы также можете прописывать стили и для других полей — области текста, радиокнопок, чек-боксов и пр.

Давайте рассмотрим подробнее каждое из них.

Текстовые области (text areas)

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

Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.

Посмотрите на пример:

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

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

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).

Для стилизации чекбокса используйте следующий HTML-код.

Name

Несколько вещей, на которые нужно обратить внимание:

Поскольку мы используем в качестве обертки для , если вы кликнете на любой элемент внутри , «кликнутым» будет .
Мы спрячем , потому что браузеры практически не позволяют нам его модифицировать.
создает пользовательский чекбокс.
Чтобы получить положение «отмечено» и стилизовать пользовательский чекбокс, мы будем использовать псевдокласс input:checked.

Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):

See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.

Вот пользовательская радиокнопка:

See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.

В обоих примерах мы использовали одну и ту же концепцию (input:checked).

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

Раскрывающийся список

Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.

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

select

Но вы не можете стилизовать выпадающие элементы, потому что их стили зависят от операционной системы. Единственный способ изменить их вид — использовать JavaScript.

Кнопки

Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.

Давайте немного украсим нашу кнопку.

button < /* remove default behavior */ appearance:none; -webkit-appearance:none; /* usual styles */ padding:10px; border:none; background-color:#3F51B5; color:#fff; font-weight:600; border-radius:5px; width:100%; >

5. Псевдоклассы UI

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

Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:

:required
:valid и :invalid
:checked (этим мы уже пользовались)

Эти могут использоваться для создания эффектов для каждого состояния:

Сообщения, генерируемые при помощи :required

Показываем сообщение о том, что заполнение поля является обязательным:

Name Email label < display:block; >input:required + span:after

Если вы удалите атрибут required при помощи JavaScript, сообщение «Required» исчезнет автоматически.

Примечание: не может содержать другие элементы. А значит, и псевдоэлементы :after или :before. Поэтому нам нужно использовать другой элемент — .

Мы можем сделать то же самое с псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.

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

Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):

See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.

Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.

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

Следующий код удаляет внешнюю границу для всех элементов:

*:focus

Добавляем внешнюю границу для элементов в фокусе:

input[type=text]:focus < background-color: #ffd969; border-color: #000; // and any other style >

6. Элементы ввода, недоступные для кастомизации

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

Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.

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

Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.

Заключение

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

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.