Как вы создаете сообщения для проверки формы HTML5?

Скажем, у вас есть такой HTML-код:

<form>
    <input placeholder="Some text!" required>
    <input type="email" placeholder="An Email!" required>
    <input type="submit" value="A Button!">
</form>

Из-за атрибутов required, новые Webkits и Firefoxes показывают сообщение проверки рядом с полем, если оставить его пустым.

Они отвечают на то, чтобы быть стилизованным по правилу, например:

div {
    font: Helvetica;
}

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

(JSFiddle показывает, что их можно создать с помощью селектора div: http://jsfiddle.net/p7kK5/)

Ответы

Ответ 1

Обновление: Chrome больше не допускает шаблонов проверки формы стилей: https://code.google.com/p/chromium/issues/detail?id=259050

В последних итерациях Chrome для них добавлена ​​поддержка псевдоселекторов, а именно:

::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}

Для получения дополнительной информации об этом, просмотрите страницу Webkit "Styling Form Controls" . Забастовкa >

Кроме того, firefox поддерживает атрибут элемента x-moz-errormessage, который позволяет вам изменить текст сообщения об ошибке, что вы можете сделать в Chrome с помощью CSS и -webkit-validation-bubble-message. Подробнее о x-moz-errormessage на странице Документов MDN.

В настоящее время Firefox не имеет возможности стирать пузырьки ошибок.

Ответ 2

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