HTML5 Требуемый стиль ввода

Ответ 1

Да, поскольку SLaks сказал, что для этого нет селектора CSS. Я бы сомневался, что это когда-либо будет в рамках CSS, потому что CSS нужно будет проверить содержимое ввода.

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

В JQuery есть несколько приятных плагинов, которые позаботятся об этом для вас http://docs.jquery.com/Plugins/validation

Ответ 2

Вы можете использовать: valid и: invalid selectors. Что-то вроде этого

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

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

Итак, по встроенной проверке я имею в виду, что в chrome, если вы выполняете <input type="email">, значение поля будет проверено на строку типа email (без какого-либо дополнительного javascript), поэтому стили выше будут работать. Однако, если вы должны были привязать их к полю type="text" или ко второму паролю (которое должно совпадать с первым), вы бы только стали зелеными, потому что все действительно, а в случае пароля no "type" для этого в любом случае.

В основном это означает, что для поддержки всех браузеров и, что более важно, более широкого массива проверок вам все равно придется прибегать к javascript, и в этом случае назначение класса .valid/.invalid не должно быть проблемой.:)

Ответ 3

Я прибегал к использованию js для применения класса .validated к форме на submit, затем используйте этот класс для стиля: invalid fields.eg:

.validated input:invalid { ... }

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

Ответ 4

Там a :user-error псевдокласс в CSS Selectors 4 рабочий проект, который будет делать именно это, стреляя как по размытию ввода, так и по форме.

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

Ответ 5

input:required {
    /* Style your required field */
    /* Be sure to style it as an individual field rather than just add your desired styles
    for a required field. */
}

Пробовал и тестировал хром. Я не тестировал его ни в каком другом браузере.

Ответ 6

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

input[required]:invalid { box-shadow: 0 0 3px 1px red }

Попробуйте: http://jsfiddle.net/2Ph2X/