Comment dois-je styliser les messages d'erreur de validation du formulaire HTML5 avec CSS?

Actuellement, il n'y a aucun moyen de style ces petits trucs de validation. La seule autre option, ce que j'ai choisi de faire, est de désactiver la validation du navigateur pour l'instant et de m'appuyer sur mes propres scripts de validation côté client.

Selon cet article: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

" la façon la plus simple de se retirer est d'ajouter le novalidate attribut à votre <form>. Vous pouvez aussi définir formnovalidate sur vos commandes submit."

Chrome fournit un look et une sensation natifs pour leurs bulles de discours d'erreur de validation. La bulle d'erreur est composée de quatre éléments qui ne sont pas des éléments normatifs. Ces quatre éléments sont stylables via des pseudo-éléments qui s'appliquent à des sections distinctes de la bulle:

::-webkit-validation-bubble

::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message 

mise à Jour: Cette méthode est obsolète.

Utilisez des pseudo-sélecteurs, comme easwee l'a dit. Par exemple, pour rendre l'élément de formulaire Vert lorsqu'il est valide, et rouge lorsqu'il est invalide, faites quelque chose comme ceci:

:invalid {
    background: #ffdddd;
         }
:valid{
      background:#ddffdd;
      }

Si vous avez besoin d'une référence complète de ces, à la tête référence de Mozilla.

P.S. désolé si je fais ces réponses mal, je suis nouveau dans cette communauté.

une zone requise sera invalide jusqu'à ce que la bonne entrée soit entrée. Un champ qui n'est pas requis mais qui a une validation, comme un champ URL, sera valide jusqu'à ce que le texte soit entré.

 input:invalid { 
border:solid red;
}

pour plus d'info http://msdn.microsoft.com/en-us/library/ie/hh772367 (v=vs 85).aspx

pour Google Chrome, il n'est plus possible de modifier le style des messages de validation: https://code.google.com/p/chromium/issues/detail?id=259050