Html form style none

Формы HTML5: CSS

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

Убираем стили по умолчанию

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

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

input[type=»text»], input[type=»email»], input[type=»tel»], input[type=»number»], textarea

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

:focus

Состояние :focus было введено еще в CSS2.1, и оно определяет стиль текущего выбранного элемента

input:focus, textarea:focus, select:focus

:checked

Стили :checked применяются к выделенным флажкам и переключателям, например:

check me input:checked ~ label

Не существует селектора :unchecked, но он вам и не нужен: просто создайте стиль для элемента в исходном состоянии, а изменения применяйте при активации состояния :checked. Как альтернативу можно использовать селектор :not(:checked).

:indeterminate

Технически состояние :indeterminate нет в спецификации, но оно там упомянуто. Согласно спецификации, оно представляет собой состояние переключателя или флажка, когда они “и выбраны, и не выбраны” (между двумя состояниями)

Оно необычно тем, что стили применяются только если свойство .indeterminate выставляется с помощью JavaScript, то есть:

document.getElementById("mycheckbox").indeterminate = true;

Оно не дает эффекта на свойстве .checked, которое может быть только true или false.

Есть несколько ситуаций, когда состояние :indeterminate может быть полезным. Если у вас есть список флажков, вы можете использовать флажок “выбрать все”, который выбирает или снимает выделение со всех флажков по клику. Например, если вы выберите только несколько флажков из списка, то флажок “выбрать все” может перейти в неопределенное (indeterminate) состояние.

:required

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

:optional

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

:valid

Применяет стили к любому полю, которое содержит верные данные.

:invalid

По аналогии с :valid, :invalid (или :not(:valid)) применяет стили к элементам, которые содержат неверные данные, то есть:

:in-range (числовые поля и слайдеры)

Числовые поля и слайдеры, содержащие числа, значение которых попадает в диапазон, заданный минимумом и максимумом, и соответствующие шагу, могут быть выбраны селектором :in-range. Но, вообще-то, крайне затруднительно вывести слайдер за пределы…

:out-of-range (числовые поля и слайдеры)

:out-of-range выбирает значения, которые находятся вне заданного диапазона значений поля ввода

:disabled

Поля ввода с атрибутом disabled можно выбрать с помощью псевдо-класса :disabled

Запомните, что отключенные поля не будут валидироваться, и их значение не будет отправлено на сервер. Но стили для псевдо-классов :required и :invalid все равно будут применяться и для отключенных элементов.

:enabled

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

:read-only

Выбрать поля с атрибутом readonly (только для чтения) можно с помощью псевдо-класса :read-only. Запомните, что значения в полях, предназначенных только для чтения, все равно будут проверены и отправлены на сервер, но пользователь не сможет менять их значение.

:read-write

Обычные поля, доступные для редактирования, могут быть выбраны с помощью псевдо-класса :read-write (или :not(:read-only)). В общем, это не тот селектор, который будет часто вам нужен.

:default (только кнопки отправки или поля ввода)

И, наконец, есть селектор :default, который применяет стили к стандартной кнопке отправки формы.

Текстовые стили заполнителей

Атрибут placeholder можно стилизовать с помощью псевдо-элемента ::placeholder с вендорными префиксами (в раздельных правилах), например:

input::-webkit-input-placeholder < color: #ccc; >input::-moz-placeholder < color: #ccc; >input:-ms-input-placeholder < color: #ccc; >input::placeholder

Специфика CSS

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

input:invalid < color: red; >input:enabled

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

Старайтесь использовать простые селекторы, и использовать минимум кода. Например, пустое обязательное (:required) поле будет невалидным (:invalid), так что редко когда нужно стилизовать первое состояние.

Всплывающий блок валидации

При отправке, первое поле с неверным значением будет выделено всплывающим блоком с сообщением.

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

::-webkit-validation-bubble < . >::-webkit-validation-bubble-arrow < . >::-webkit-validation-bubble-message < . >::-webkit-validation-bubble-arrow-clipper

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

Поддержка браузерами

Вышеприведенные стили применяются к полям немедленно. Например,

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

Лично я предпочитаю подход, когда ошибки отображаются при отправке формы, ли при переходе с одного поля на другое. Браузеры не позволяют реализовать такое поведение стандартными средствами. Вы правильно меня поняли — вам нужен JavaScript. К счастью, API проверки правильности заполнения формы в HTML5 позволяет:

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

Мы рассмотрим ближе эти возможности в последней части серии статей.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/html5-forms-css/
Перевел: Станислав Протасевич
Урок создан: 31 Мая 2014
Просмотров: 27365
Правила перепечатки

5 последних уроков рубрики «HTML5»

• 

Расширяем возможности HTML за счёт создания собственных тегов

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

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

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

Создание форм с помощью Webix Framework — 4 практических примера

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

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Источник