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

Как сделать красивый input css

  • автор:

Стилизация input radio и checbox кнопок (на чистом CSS)

ukraine help

Сегодня хочу поделится с вами несколькими вариантами стилизации input type=”radio” а так же input type=”checkbox” . Ни для кого не секрет, что без стилизации этих элементов не бывает жизни у верстальщиков. На своей практике я почти в каждом проекте встречаю кастомную стилизацию radio и checbox.

В интернете есть масса способов их стилизации, но большинство из них либо устарели, либо используют скрпты. Что в свою очередь увеличивает вес страницы. Это для SEO не есть хорошо. И так, давайте начнем, ниже я буду показывать вам готовые примеры стилизации input radio и checbox (на чистом css)

1. Стилизация radio кнопок

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

2. Стилизация checkbox флажков

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

Читайте також: FAQ, Accordion — як зробити блок питання та відповіді

3. Стилизация radio флажков

И последний вариант, это оформление radio флажков.

Красивая форма для сайта

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

Пример 1. Форма регистрации пассажира

 

Информация о пассажире

* < box-sizing: border-box; >.railway < max-width: 350px; margin: 50px auto 0; padding: 20px; background: #FAAB1B; font-family: 'Oswald', sans-serif; >.stripes-block < position: relative; padding: 10px 10px 15px; margin-bottom: 20px; background: repeating-linear-gradient(-30deg, #291810, #291810 8px, #FAAB1B 10px, #FAAB1B 14px); >.stripes-block:before < content: ""; position: absolute; left: 50%; top: 12px; margin-left: -6px; width: 14px; height: 14px; border-radius: 50%; background: #fffffe; box-shadow: 0 0 0 2px #291810, 0 0 0 12px #9c8778; >.line < width: 60%; margin: 0 auto; height: 15px; border: 2px solid #603624; border-radius: 3px; background: repeating-linear-gradient(90deg, #FAAB1B, #FAAB1B 3px, #603624 3px, #603624 6px); >.railway h3 < padding: 7px; margin-bottom: 20px; text-align: center; line-height: 1; text-transform: uppercase; color: #FAAB1B; background: #291810; >.form-group < margin-bottom: 20px; padding: 10px; background: #291810; >.form-group input, .form-group label, .form-group textarea < display: block; width: 100%; >.form-group input < padding: 0; line-height: 30px; background: #FAAB1B; border-width: 0; >.form-group label < margin-bottom: 5px; color: #FAAB1B; text-transform: uppercase; font-size: 12px; >.submit-block < padding: 10px 20px 20px; background: repeating-linear-gradient(-30deg, #291810, #291810 8px, #FAAB1B 10px, #FAAB1B 14px); text-align: center; cursor: pointer; >.submit-button < display: inline-block; padding: 5px 10px; background: #FAAB1B; >.submit-button input

Пример 2. Форма в стиле этикетки для одежды

  
* .air < max-width: 350px; margin: 50px auto 0; padding: 20px; background: #E4E3DF; font-family: 'Oswald', sans-serif; >.form-inner < border: 2px solid #909090; border-bottom: none; >.stripes-block < position: relative; padding: 15px; margin-bottom: 20px; background: repeating-linear-gradient(-45deg, #E4E3DF, #E4E3DF 5px, #909090 6px, #909090 8px); border-bottom: 2px solid #909090; >.stripes-block:before < content: ""; position: absolute; left: 50%; top: 8px; margin-left: -6px; width: 14px; height: 14px; border-radius: 50%; background: #fffffe; box-shadow: 0 0 0 1px #090606, 0 0 0 12px #9c8778; >.form-row < position: relative; padding: 10px; border-bottom: 2px solid #909090; >.form-row label < display: block; >.form-row input < display: block; width: 100%; padding: 0; line-height: 30px; border-width: 0; background: #E4E3DF; >.form-row textarea < width: 100%; margin-bottom:40px; padding: 0; outline: 0; line-height: 40px; background: transparent url(https://html5book.ru/wp-content/uploads/2016/12/bg-form.png) bottom left repeat-x; background-size: 8px 40px; letter-spacing: 0.2em; background-attachment: local; background-repeat: repeat; border-width: 0; resize: none; >.form-row-icon < position: relative; border-bottom: 2px solid #909090; >.form-row-icon .fa < position: absolute; left: 0; top: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #909090; color: #E4E3DF; border-bottom: 2px solid; >.form-row-icon input < display: block; width: 100%; padding: 0 10px 0 50px; line-height: 40px; box-sizing: border-box; border-width: 0; background: #E4E3DF; >.form-row-icon .fa-paper-plane-o < border-bottom-color: #909090; cursor: pointer; >.form-row-icon input[type="submit"]

Пример 3. Форма-почтовая открытка

  
* < box-sizing: border-box; >body < background: #F5E9D9; >.postcard < max-width: 350px; margin: 50px auto 0; padding: 20px; background: #fffdee; border: 10px solid transparent; border-image: 10 repeating-linear-gradient(135deg, #C42061, #C42061 10px, transparent 10px, transparent 20px, #FBCFDF 20px, #FBCFDF 30px, transparent 30px, transparent 40px); font-family: 'Playfair Display'; color: #605756; >.form-row < margin-bottom: 15px; >.form-row input[type="text"], .form-row input[type="email"], .form-row textarea < width: 100%; padding: 0 10px; line-height: 35px; border-width: 0; outline: none; background: transparent url(https://html5book.ru/wp-content/uploads/2016/12/bg-form.png) bottom left repeat-x; background-size: 8px 35px; font-family: 'Playfair Display'; >.form-row textarea < background-attachment: local; background-repeat: repeat; resize: none; >.form-row input[type="submit"] < padding: 10px 20px; margin-top: 10px; background: #F67CA5; border-width: 0; cursor: pointer; outline: none; font-family: 'Playfair Display'; font-size: 13px; letter-spacing: 1px; color: #fffdee; text-transform: uppercase; transition: 1s cubic-bezier(.165, .84, .44, 1); >.form-row input[type=submit]:hover

Пример 4. «Говорящая» форма

  

Написать нам

* < box-sizing: border-box; >body < background: #f69a73; >.decor < position: relative; max-width: 400px; margin: 50px auto 0; background: white; border-radius: 30px; >.form-left-decoration, .form-right-decoration < content: ""; position: absolute; width: 50px; height: 20px; background: #f69a73; border-radius: 20px; >.form-left-decoration < bottom: 60px; left: -30px; >.form-right-decoration < top: 60px; right: -30px; >.form-left-decoration:before, .form-left-decoration:after, .form-right-decoration:before, .form-right-decoration:after < content: ""; position: absolute; width: 50px; height: 20px; border-radius: 30px; background: white; >.form-left-decoration:before < top: -20px; >.form-left-decoration:after < top: 20px; left: 10px; >.form-right-decoration:before < top: -20px; right: 0; >.form-right-decoration:after < top: 20px; right: 10px; >.circle < position: absolute; bottom: 80px; left: -55px; width: 20px; height: 20px; border-radius: 50%; background: white; >.form-inner < padding: 50px; >.form-inner input, .form-inner textarea < display: block; width: 100%; padding: 0 20px; margin-bottom: 10px; background: #E9EFF6; line-height: 40px; border-width: 0; border-radius: 20px; font-family: 'Roboto', sans-serif; >.form-inner input[type="submit"] < margin-top: 30px; background: #f69a73; border-bottom: 4px solid #d87d56; color: white; font-size: 14px; >.form-inner textarea < resize: none; >.form-inner h3

Пример 5. Форма с фоновым изображением и полупрозрачным эффектом наложения

 

Регистрация

* < box-sizing: border-box; >.transparent < position: relative; max-width: 400px; padding: 60px 50px; margin: 50px auto 0; background-image: url(https://html5book.ru/wp-content/uploads/2017/01/photo-roses.jpg); background-size: cover; >.transparent:before < content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to right bottom, rgba(43, 44, 78, .5), rgba(104, 22, 96, .5)); >.form-inner < position: relative; >.form-inner h3 < position: relative; margin-top: 0; color: white; font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 26px; text-transform: uppercase; >.form-inner h3:after < content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 60px; background: #1762EE; >.form-inner label < display: block; padding-left: 15px; font-family: 'Roboto', sans-serif; color: rgba(255, 255, 255, .6); text-transform: uppercase; font-size: 14px; >.form-inner input < display: block; width: 100%; padding: 0 15px; margin: 10px 0 15px; border-width: 0; line-height: 40px; border-radius: 20px; color: white; background: rgba(255, 255, 255, .2); font-family: 'Roboto', sans-serif; >.form-inner input[type="checkbox"] < position: absolute; opacity: 0; >#custom-checkbox+label < position: relative; margin: 20px 0; text-transform: none; cursor: pointer; >#custom-checkbox+label:before < content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: text-top; background: white; >#custom-checkbox:checked+label:before < background: #1762EE; >#custom-checkbox:checked+label:after < content: ""; position: absolute; width: 2px; height: 2px; left: 20px; top: 9px; background: white; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform: rotate(45deg); >.form-inner input[type="submit"]

Пример 6. Форма регистрации для свадебного сайта

 

Вы приглашены?
Подтвердите ваше участие

Ваше имя:

Гостей:

Я приглашен.

* < box-sizing: border-box; >body < background: #FFF2E3; >.wedding < position: relative; max-width: 320px; margin: 50px auto 0; text-align: center; >.form-inner:before < display: inline-block; margin-top: -45px; content: url(https://html5book.ru/wp-content/uploads/2017/05/form-flower.png); >.form-inner < padding: 0 40px 10px; margin-top: 45px; background: #ffffff; border-radius: 2px; box-shadow: 0 0 6px 1px rgba(0, 0, 0, .1); >.form-inner h2 < font-weight: 300; font-size: 20px; text-transform: uppercase; font-family: 'Cormorant Garamond', serif; >.form-content < position: relative; margin: 30px -40px 0 -40px; padding: 10px 40px 0 40px; background: #FFF8F3; >.form-content:before < content: ""; position: absolute; top: -4px; right: 0; left: 0; height: 2px; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; >.form-content h3 < font-family: 'Marck Script', cursive; font-size: 22px; color: #898989; font-weight: normal; >.form-content input, .form-content select < height: 38px; line-height: 38px; padding: 0 10px; background: #ffffff; border: 1px solid #DDDDDD; font-size: 20px; font-family: 'Cormorant Garamond', serif; color: #808080; outline: none; >.form-content input < width: 100%; >.form-content input:focus, .form-content select:focus < border-color: #C44D58; >.form-content input[type="submit"] < margin: 20px 0; padding: 0 10px; background: #FF6B6B; color: #ffffff; font-size: 18px; text-transform: uppercase; border-width: 0; border-radius: 20px; cursor: pointer; transition: .2s linear >.form-content input[type="submit"]:hover

Пример 7. Форма с анимированными подписями к полям

 

Войти на сайт

* < box-sizing: border-box; >body < background: #e6f4fd; font-family: 'Roboto', sans-serif; >.ui-form < max-width: 350px; padding: 80px 30px 30px; margin: 50px auto 30px; background: white; >.ui-form h3 < position: relative; z-index: 5; margin: 0 0 60px; text-align: center; color: #4a90e2; font-size: 30px; font-weight: normal; >.ui-form h3:before < content: ""; position: absolute; z-index: -1; left: 60px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: #fee8e4; >.ui-form h3:after < content: ""; position: absolute; z-index: -1; right: 50px; top: -40px; width: 0; height: 0; border-left: 55px solid transparent; border-right: 55px solid transparent; border-bottom: 90px solid #ffe3b5; >.form-row < position: relative; margin-bottom: 40px; >.form-row input < display: block; width: 100%; padding: 0 10px; line-height: 40px; font-family: 'Roboto', sans-serif; background: none; border-width: 0; border-bottom: 2px solid #4a90e2; transition: all 0.2s ease; >.form-row label < position: absolute; left: 13px; color: #9d959d; font-size: 20px; font-weight: 300; transform: translateY(-35px); transition: all 0.2s ease; >.form-row input:focus < outline: 0; border-color: #F77A52; >.form-row input:focus+label, .form-row input:valid+label < transform: translateY(-60px); margin-left: -14px; font-size: 14px; font-weight: 400; outline: 0; border-color: #F77A52; color: #F77A52; >.ui-form input[type="submit"] < width: 100%; padding: 0; line-height: 42px; background: #4a90e2; border-width: 0; color: white; font-size: 20px; >.ui-form p

Делаем красивый input[type=file] для адаптивного сайта

Уже немало копий front-end разработчиков было сломано об проблему стилизации поля ввода input[type=file]. Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input[type=file] не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла. Но что же делать, когда заказчик хочет адаптивный сайт с красивыми стилизованными формами, в которых нельзя обойтись без этого поля ввода?

Способы решения проблемы стилизации поля

За то время, сколько существует эта проблема (а существует она очень долго), было найдено несколько способов ее решения. Всего их существует три:

Способ №1 (самый распространенный)

Убедить заказчика, что можно жить и со стандартным input[type=file].

Способ №2

Написать/использовать готовый загрузчик файлов на Flash/Java-апплете. Используется, например, на habrastorage.org/

Способ №3 (буден использован в статье)

Средствами CSS «замаскировать» стандартный input[type=file], сделать его полностью прозрачным и поместить на месте стилизованного фейкового поля, чтобы клик по последнему вызывал клик по стандартному, и, как следствие, открывал системное окно выбора файла.

И у второго, и у третьего способа, разумеется, есть свои минусы. Существенный недостаток Flash/Java-решения в том, что для его работы нужны соответствующие плагины, которых в браузере пользователя может не оказаться. Недостаток «маскировочного» решения же заключается в том, что для его реализации необходимо использовать хаки (про это речь пойдет ниже), а также потому, что оно бессмысленно без использования JavaScript (ведь нужно же как-то различать состояния «файл не выбран» и «файл выбран» для стилизованного фейкового поля, что на одном CSS сделать невозможно).

Схема велосипеда

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

Поэтому ключевой задачей было поставлено создание «резинового» input[type=file], который на экранах мобильных устройств представлял бы из себя простую кнопку для выбора файла (имя выбранного файла выводится на ней же), а на широких экранах выглядел бы как привычное для всех текстовое поле + кнопка, которое может тянуться на всю ширину окна:

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

Схематический вид элемента на десктопных устройствах

Дабы упростить себе жизнь, было решено отказаться от поддержки «любимца» всех верстальщиков — браузера IE 8. Да, сейчас многие меня упрекнут за это, но во-первых, этот браузер сейчас используется всего 4,8% пользователей (с тенденцией на понижение), что видно из статистики, а во-вторых, у меня не было и нет большой уверенности, что реализовать подобный input[type=file] вообще возможно для этого браузера.

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

 
Файл не выбран
«Тяни, Пятачок!»

Перейдем к стилям. Чтобы у читателя не сложилось неверное впечатление, что каждое используемое в статье значение свойств CSS имеет огромную важность (так называемые «магические числа»), договоримся помечать те из них, которые можно смело изменять под свои нужды, комментарием

Договорились? Отлично! Начнем стилизовать наше фейковое поле выбора файла с его «обертки» — div.file_upload:

.file_upload< position: relative; overflow: hidden; font-size: 1em; /* example */ height: 2em; /* example */ line-height: 2em /* the same as height */ >

— свойство position задается для того, чтобы относительно div.file_upload можно было абсолютно позиционировать его дочерние элементы, а свойство overflow — для того, чтобы скрывать все то, что по каким-то причинам не влезет в нашу обертку (а такое найдется, но об этом позже). На широких экранах наши красивые поле и кнопка должны отображаться в одну строку, поэтому зададим для обоих float:

.file_upload > div, .file_upload > button

Зададим также какую-нибудь базовую ширину для обоих элементов в процентах:

.file_upload > div < width: 80%; /* example */ padding-left: 1em; /* example */ margin-right: -1em; /* the same as padding-left, but negative */ line-height: inherit >.file_upload > button< width: 20% /* example */ >

Поскольку мы хотим, чтобы на мобильных устройствах текстовое поле скрывалось, и оставалась одна кнопка выбора файла, необходимо задать media query:

@media only screen and ( max-width: 500px ) < /* example */ .file_upload >div < display: none >.file_upload > button < width: 100% >>

Ну а теперь — самое веселое! Необходимо сделать стандартный input[type=file] полностью прозрачным, и растаращитьрастянуть его до размеров «обертки» div.file_upload. Для реализации последнего применим хак в виде абсолютного позиционирования и свойства CSS 3 transform, с помощью которого увеличим элемент, например, в 20 раз (да, это самое обычное «магическое число»):

.file_upload input[type=file]< position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(20); letter-spacing: 10em; /* IE 9 fix */ -ms-transform: scale(20); /* IE 9 fix */ opacity: 0; cursor: pointer >

Как видно из приведенного выше фрагмента CSS, для IE 9 потребовались дополнительные костыли. Это связано с тем, что данный браузер при клике на текстовое поле не вызывает системное окно выбора файла, а любезно предлагает «стереть» имя уже выбранного, что символизируется мигающим текстовым курсором. Поэтому для него дополнительно задается огромный интервал между буквами, что увеличивает кнопку элемента до размеров div.file_upload. Отмечу также, что z-index в данном случае не указывается, т.к. элемент идет последним «потомком» в выбранной с самого начала разметке.

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

Нужно больше стилей!

Разумеется, в таком примитивном виде поле выбора файла вряд ли кого-то устроит, поэтому добавим дополнительные стили, которые сделают кнопку выбора файла, скажем, фиолетовой, добавят тени и т.д. Не забудем также добавить свой стиль для кнопки, когда на нее наведен курсор, стиль для нажатой кнопки, а еще добавим стиль для всего элемента, когда на нем находится фокус (будет применяться при помощи JavaScript):

/* Making it beautiful */ .file_upload < border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,0.1); transition: box-shadow 0.1s linear >.file_upload.focus < box-shadow: 0 0 5px rgba(0,30,255,0.4) >.file_upload > button < background: #7300df; transition: background 0.2s; border: 1px solid rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); color: #fff; text-shadow: #6200bd 0 -1px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis >.file_upload:hover > button < background: #6200bd; text-shadow: #5d00b3 0 -1px 0 >.file_upload:active > button

Теперь наше поле выбора файла выглядит так:

Нужно больше костылей!

Поскольку мы делаем полноценное поле для выбора файла, то нужно позаботиться о том, чтобы его можно было комфортно заполнять и с клавиатуры (сейчас же фокус вначале устанавливается на стилизованную кнопку, а затем — на скрытыйinput[type=file], что никак визуально не проявляется). Для этого, разумеется, используем JavaScript. Чтобы не писать много кода, я позволю себе использовать популярную библиотеку jQuery:

var wrapper = $( ".file_upload" ), inp = wrapper.find( "input" ), btn = wrapper.find( "button" ), lbl = wrapper.find( "div" ); btn.focus(function()< inp.focus() >); // Crutches for the :focus style: inp.focus(function()< wrapper.addClass( "focus" ); >).blur(function()< wrapper.removeClass( "focus" ); >);

Поле ввода до сих пор оставалось «мертвым» — при выборе файла имя последнего нигде не отображалось. Пришло время исправить и это:

 var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false; inp.change(function()< var file_name; if( file_api && inp[ 0 ].files[ 0 ] ) file_name = inp[ 0 ].files[ 0 ].name; else file_name = inp.val().replace( "C:\\fakepath\\", '' ); if( ! file_name.length ) return; if( lbl.is( ":visible" ) )< lbl.text( file_name ); btn.text( "Выбрать" ); >else btn.text( file_name ); >).change(); 

— если браузер поддерживает File API, то имя файла определяется с помощью него, в противном случае оно вырезается из значения скрытого input[type=file]. Для мобильных устройств, когда элемент представляет из себя одну кнопку, имя выбранного файла выводится на ней же.

Казалось бы, все, что требуется, уже написано. А вот фигушки! Если выбрать файл, используя «мобильное» поле, а затем увеличить размер окна и перевести элемент в «десктопный», то в текстовом поле так и останется «Файл не выбран» — нужно каждый раз обновлять элемент при изменении размеров окна:

$( window ).resize(function()< $( ".file_upload input" ).triggerHandler( "change" ); >);
И что же мы получили в итоге?

Полученное стилизованное поле выбора файла было успешно протестировано в следующих браузерах:

  • FireFox 22.0 (Linux, Windows)
  • Opera 12.16 (Linux, Windows)
  • Internet Explorer 9
  • Chromium 27.0 (Linux)
  • Apple Safari (iOS 6.3.1)
  • Android browser (Android 2.3.6)
  • Android FireFox

Из плюсов рассмотренного в статье подхода можно выделить следующие основные:

  • Не используется Flash.
  • Элемент можно легко стилизовать средствами CSS, используя современные технологии адаптивного дизайна.
  • Поле можно заполнять и с клавиатуры.
  • В целом, данный подход относительно прост.

Из основных минусов:

  • Необходимость использования JavaScript.
  • Использование хаков CSS (кто знает, будет ли все это работать и в новых версиях браузеров).
  • Необходимость писать дополнительные костыли для поля с атрибутом multiple.
  • Некроссбраузерность — отсутствует поддержка IE 8, а также других старых браузеров, для которых нужно обязательно использовать «браузерные» свойства CSS.

Рабочий пример можно посмотреть на CodePen.

Полное руководство по стилям форм

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

Бонус: Мы также включили в эту статью руководство по созданию формы подписки на рассылку с элементами анимации с помощью плагина WordPress Gravity Forms.

Обновлено: 2022-01-14 17:18:41 Вадим Дворников автор материала

Начинаем со сброса HTML5

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

Чаще всего мы используем Normalize.css. Это идеальное сочетание простоты в использовании и качества.

Общие стили CSS формы

Поля ввода будут работать без стилей CSS . Они будут выглядеть ужасно, но они будут работать.

Общие стили CSS формы

Поля ввода будут отображаться и работать без стилей.

Но заставить их работать – это лишь полдела. Чтобы задать стили так, чтобы все выглядело красиво, может потребоваться много времени и труда. Хорошая новость заключается в том, что мы сделали большую часть тяжелой работы за вас. Взгляните на приведенные ниже стили для CSS input type text :

/* Формы ——————————————— */ input[type=»color»], input[type=»date»], input[type=»datetime»], input[type=»datetime-local»], input[type=»email»], input[type=»month»], input[type=»number»], input[type=»password»], input[type=»search»], input[type=»tel»], input[type=»text»], input[type=»time»], input[type=»url»], input[type=»week»], select, textarea < border-color: #e0e0e0; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); border-width: 1px; border-style: solid; color: #474e57; font-size: 16px; font-weight: 400; padding: 10px; width: 100%; >input[type=»color»]:hover, input[type=»date»]:hover, input[type=»datetime»]:hover, input[type=»datetime-local»]:hover, input[type=»email»]:hover, input[type=»month»]:hover, input[type=»number»]:hover, input[type=»password»]:hover, input[type=»search»]:hover, input[type=»tel»]:hover, input[type=»text»]:hover, input[type=»time»]:hover, input[type=»url»]:hover, input[type=»week»]:hover, textarea:hover, select:hover < border-color: #e0e0e0; >input[type=»color»]:focus, input[type=»date»]:focus, input[type=»datetime»]:focus, input[type=»datetime-local»]:focus, input[type=»email»]:focus, input[type=»month»]:focus, input[type=»number»]:focus, input[type=»password»]:focus, input[type=»search»]:focus, input[type=»tel»]:focus, input[type=»text»]:focus, input[type=»time»]:focus, input[type=»url»]:focus, input[type=»week»]:focus, textarea:focus, select:focus < border-color: #adadad; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(160, 160, 160, 0.7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(160, 160, 160, 0.7); outline: none; >input[type=»color»] < padding: 5px; >input[type=»checkbox»], input[type=»image»], input[type=»radio»] < width: auto; >input::-webkit-input-placeholder, textarea::-webkit-input-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400; >input:-moz-placeholder, textarea:-moz-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400; >input::-moz-placeholder, textarea::-moz-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400; >input:-ms-input-placeholder, textarea:-ms-input-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400; >input::placeholder, textarea::placeholder

Сокращение

Если вы заметили, мы добавили отдельные правила для различных элементов CSS input type . Способ упростить это, который вы могли видеть во многих темах WordPress , заключается в том, чтобы сделать что-то вроде этого:

input, select, textarea

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

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

Мы управляем CSS, а CSS управляет нами

Стили фокуса ввода и состояния hover делают дизайн более приятным. Сколько раз вы слышали, что все зависит от деталей? Разница от добавления этих стилей ( в том числе и для CSS input file ) будет невелика, но это значительно улучшит общий опыт взаимодействия.

Углубляемся все дальше: добавляем стили для диапазона, чекбокса, списка и радиокнопки

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

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

В любом случае, это « Полное руководство », и оно не могло бы считаться таковым, если бы мы упустили этот аспект:

input[type=»range»] < -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 28px; margin: 10px 0; width: 100%; >input[type=»range»]:focus < outline: none; >input[type=»range»]:focus::-ms-fill-lower < background: #adadad; >input[type=»range»]:focus::-ms-fill-upper < background: #adadad; >input[type=»range»]:focus::-webkit-slider-runnable-track < background: #adadad; >input[type=»range»]::-webkit-slider-runnable-track < background: #e0e0e0; border: 0 none; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; height: 3px; width: 100%; >input[type=»range»]::-webkit-slider-thumb < -webkit-appearance: none; appearance: none; background: #1c1e1f; border: 0 none; -webkit-border-radius: 100%; border-radius: 100%; cursor: pointer; height: 28px; margin-top: 14px; width: 28px; >input[type=»range»]::-moz-range-track < background: #e0e0e0; border-radius: 3px; cursor: pointer; height: 3px; width: 100%; >input[type=»range»]::-moz-range-thumb < background: #1c1e1f; border: 0 none; border-radius: 100%; cursor: pointer; height: 28px; width: 28px; >input[type=»range»]::-ms-track < background: transparent; border-color: transparent; color: transparent; cursor: pointer; width: 100%; height: 3px; >input[type=»range»]::-ms-fill-lower < background: #e0e0e0; border-radius: 3px; >input[type=»range»]::-ms-fill-upper < background: #e0e0e0; border-radius: 3px; >input[type=»range»]::-ms-thumb

Если вы заметили, в строках 2-4 приведенного выше кода содержится именно то, что помогает нам подчинить это поле нашей воле. Магическое свойство appearance .

Свойство appearance применяется для отображения элемента с использованием оригинальных стилей операционной системы пользователя.

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

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

Стили поля со списком

Поле CSS input type со списком на протяжении многих лет оставалось тем камнем, о который разбивался наш дизайн и кроссбраузерная совместимость. Предлагалось много решений, в том числе создавались целые библиотеки Javascript . Но самый простой способ, который нашел я, заключается в добавлении всего нескольких строк CSS :

Стили поля со списком

Поле со списком в разных браузерах

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

select < -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(images/select-bg.svg); background-repeat: no-repeat; background-position: right 10px center; -webkit-background-size: 14px 12px; background-size: 14px 12px; >

И это все. Мы снова используем свойство appearance. Различные браузеры по- разному определяют оформление input CSS кнопки переключателя. Чтобы решить данную проблему, можно добавить аккуратное фоновое изображение, которое будет работать в качестве переключателя.

Используйте SVG для изображения. Дополнительным преимуществом этого формата является то, что он, как правило, имеет меньший размер, чем обычный JPG или PNG .

Пользовательские стили CSS для чекбокса и радиокнопки

Здесь важно совместить структуру дерева DOM и эти элементы. Возможно, вам придется изменить правила CSS или структуру DOM , чтобы все работало правильно. Но уделив немного внимания деталям, вы сможете сделать это. И вы не пожалеете о потраченном времени:

input[type="checkbox"], input[type="radio"] < margin: 0; opacity: 0; padding: 0; >input[type="checkbox"] + label, input[type="radio"] + label < background: url(images/checkbox.svg) no-repeat scroll left center transparent; -webkit-background-size: 15px 15px; background-size: 15px 15px; display: inline-block; line-height: 15px; margin-left: -18px; padding-left: 22px; >input[type="checkbox"]:checked + label < background-image: url(images/checked.svg); -webkit-background-size: 16px 15px; background-size: 16px 15px; >input[type="radio"] + label < background-image: url(images/radio.svg); >input[type="radio"]:checked + label < background-image: url(images/radio-select.svg); >

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

Плагины WordPress для добавления стилей форм

Теперь у нас есть понимание того, что нужно сделать, чтобы задать стили для input CSS . До сих пор мы использовали их только в условиях, при которых у нас есть полный контроль: статический HTML . Если вы готовы не останавливаться на этом, и хотите знать, как задать стили форм в WordPress , я расскажу и об этом.

Только не это!

Мы используем плагины, потому что создание форм в HTML — это очень трудоемкий процесс. Эти плагины обычно содержат свои стандартные стили. Это делается для того, чтобы формы выглядели одинаково хорошо не только в различных браузерах, но и с различными темами, которые будут использоваться на сайте. Давайте рассмотрим в качестве примера популярный плагин Gravity Forms.

Итак, мы добавили пользовательские стили для наших полей ввода формы, а теперь хотим установить на сайте еще и Gravity Forms , как я сделал здесь .

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

.gform_wrapper .ginput_container_multiselect select < background-image: none; >.gform_wrapper .gfield_checkbox li input + label, .gform_wrapper .gfield_radio li input + label

Я удалил изображение, которое мы использовали для списка, а также внес некоторые незначительные изменения для чекбокса и радиокнопки. У нас больше нет контроля над деревом DOM , так как Gravity Forms делает это за нас, поэтому некоторые незначительные корректировки необходимы.

Еще одна причина внести эти изменения заключается в том, что мы загружаем стили, которые поставляются с плагином форм. Но если мы решили не делать этого и хотим использовать только наши CSS input type ?

Пользовательские стили CSS для Gravity Forms

Первое, что нам нужно сделать, это отключить стили front-end Gravity Forms . Вот фильтр, который вы можете поместить в файл functions.php :

Затем можно начать задавать собственные стили для вашей конкретной темы. Это долгий и утомительный процесс. У нас есть вариант взять стили, которые мы создали для использования с нашей основной темой, но они также будут работать с другими Sass-темами WordPress . Посмотрите наши SCSS-файлы для Gravity Forms. Если SCSS не ваш конек, вы можете посмотреть CSS-версию.

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

Стили формы подписки на новостную рассылку

Посмотрите на эту форму!

Вы можете применить методы, описанные в этой статье для настройки других плагинов форм WordPress , но я работал именно с плагином Gravity Forms .

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

Если вы создаете форму самостоятельно, вам нужно добавить в нее класс newsletter-signup . Я использовал этот класс, чтобы указать конкретную форму как в CSS , так и в JQuery , который мы будем использовать.

Вот правила для input CSS , которые необходимо задать:

.newsletter-signup_wrapper < background-color: #fff; color: #d5bba4; height: 70px; margin: 2rem auto; overflow: hidden; position: relative; -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); >.newsletter-signup_wrapper .gform_title < background-color: #e85657; border: 0 none; color: #fff; cursor: pointer; font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; line-height: 7rem; letter-spacing: 1px; overflow: hidden; padding: 0 1rem; text-align: center; text-transform: uppercase; >.newsletter-signup_wrapper .button < background: #ba997b; display: block; font-size: 2rem; font-weight: 800; letter-spacing: 1px; padding: 1.5rem; width: 100%; >.newsletter-signup_wrapper .button:focus, .newsletter-signup_wrapper .button:hover < background: #a9896d; >.newsletter-signup_wrapper .gform_body, .newsletter-signup_wrapper .gform_footer < padding: 0 2rem 2rem; >.newsletter-signup_wrapper form < font-size: 2.4rem; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); >.newsletter-signup_wrapper label < color: #d5bba4; font-weight: 700; font-size: 2rem; padding: 1rem 0 0; text-transform: uppercase; >.newsletter-signup_wrapper .gform_body, .newsletter-signup_wrapper .gform_footer < line-height: 1.75; -webkit-transition: all 0.4s 0.2s; transition: all 0.4s 0.2s; -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; opacity: 0; >.newsletter-signup_wrapper input < -webkit-border-radius: 0; border-radius: 0; >.newsletter-signup_wrapper.open .gform_title < cursor: auto; >.newsletter-signup_wrapper.open .gform_body, .newsletter-signup_wrapper.open .gform_footer < opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);

В форме из нашего примера используется кнопка для запуска анимации в верхней части, но мы не имеем к этому доступа. Gravity Forms не выводит заголовок, поэтому мы можем использовать это. Мы разместили там элемент со input CSS стилями gform_title , который будет выглядеть как кнопка. Кроме этого мы установили для формы значение line-height , как у этой псевдокнопки. Это позволит нам скрыть форму до тех пор, пока кто-то не кликнет по ней мышью.

Следующий фрагмент головоломки - JQuery :

(function( window, $, undefined ) < 'use strict'; var $document = $( document ); function newsletterSignUp() < var $newsletterFormWrap = $( '.newsletter-signup_wrapper' ), $newsletterTitle, $newsletterForm, $newsletterFormHeight; if ( 0 === $newsletterFormWrap.length ) < return; >$newsletterTitle = $newsletterFormWrap.find( '.gform_title' ); if ( 0 === $newsletterTitle.length ) < return; >$newsletterForm = $newsletterFormWrap.find( 'form' ); $newsletterFormHeight = $newsletterForm.height(); $newsletterTitle.on( 'click', function() < var $that = $( this ); $newsletterFormWrap.addClass( 'open' ).height( $newsletterFormHeight ); >) >; // Документ готов. $document.ready(function() < newsletterSignUp(); >); >)( this, jQuery );

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

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

Хотите увидеть форму, которую мы только что создали, в действии? Зайдите сюда !

Стили формы подписки на новостную рассылку - 2

Пользовательская форма на основе Gravity Forms после добавления анимации

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

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

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