Comment styliser les messages d'erreur de validation de formulaire HTML5 avec CSS?

Question

Comment styliser les messages d'erreur de validation de formulaire HTML5 avec CSS?

Answer 1

Actuellement, il n'existe aucun moyen pour le style de ces petits validation des info-bulles. La seule autre option, qui est ce que j'ai choisi de le faire, est de désactiver le navigateur de validation, tous ensemble, pour l'instant, et de compter 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 l'opt-out est d'ajouter la novalidate attribut à votre <form>. Vous pouvez également définir formnovalidate sur votre soumettre des contrôles."

Answer 2

Chrome offre une apparence native pour leurs bulles de message d'erreur de validation. La bulle d'erreur est composée de quatre éléments contenant des éléments non 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 
 

Answer 3

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

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

Si vous avez besoin d'une référence complète de ceux-ci, dirigez-vous vers la référence de Mozilla.

PS Désolé si je fais mal ces réponses, je suis nouveau dans cette communauté.

Answer 4

Un champ obligatoire sera invalide jusqu'à ce que l'entrée correcte soit entrée. Un champ qui n'est pas obligatoire mais qui a une validation, tel qu'un champ URL, sera valide jusqu'à ce que du texte soit entré.

  input:invalid { 
border:solid red;
}
 

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

Answer 5

Pour Google Chrome, il n'est plus possible de styliser les messages de validation: https://code.google.com/p/chromium/issues/detail?id=259050