Comment styliser les messages de validation des formulaires HTML5 ?

Question

Disons que vous avez du HTML comme ceci :

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

En raison de la required les Webkits et les Firefox les plus récents affichent un message de validation à côté du champ si vous le laissez vide.

Ils répondent à une règle de style telle que :

div {
    font: Helvetica;
}

Mais je n'arrive pas à trouver un sélecteur plus spécifique pour eux. Quelqu'un sait-il quel sélecteur est utilisé, ou sera utilisé, ou même un rapport de bogue pour webkit/gecko concernant ceci ?

( JSFiddle montrant qu'ils peuvent être stylisés avec un sélecteur de div : http://jsfiddle.net/p7kK5/ )

Answer 1

Mise à jour : Chrome ne permet plus de styliser les bulles de validation des formulaires : https://code.google.com/p/chromium/issues/detail?id=259050

Dans les dernières itérations de Chrome, la prise en charge des pseudo-sélecteurs a été ajoutée pour ces derniers, à savoir ;

~~::-webkit-validation-bubble{}

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

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

:-webkit-validation-bubble-message{}~~

Pour plus d'informations à ce sujet, consultez le site Page de trac "Styling Form Controls" de Webkit .

En outre, firefox prend en charge l'attribut d'élément x-moz-errormessage qui vous permet de modifier le texte du message d'erreur, ce que vous pouvez faire dans Chrome en utilisant CSS et -webkit-validation-bubble-message. En savoir plus sur x-moz-errormessage sur la page MDN Docs .

Pour l'instant, Firefox ne dispose d'aucun moyen de styliser les bulles d'erreur.

Answer 2

J'ai bien peur que vous deviez utiliser des sélecteurs plus spécifiques pour tout le reste. body > div, etc.

Answer 3

Je pense que ce qui est nécessaire est juste d'ajouter du novalidate à Form.

montrer ce lien

http://www.wufoo.com/html5/attributes/11-novalidate.html