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

Question

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

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

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

Они отвечают тем, что их стилизуют с помощью правила, такого как:

div {
    font: Helvetica;
}

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

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

Answer 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{}

Для получения дополнительной информации об этом посетите страницу «1011 * Webkit« Styling Form Controls ».

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

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

Answer 2

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