Forum : Tutoriel vidéo : Validation de formulaire en HTML5

Bonjour,
j'ai bien suivi le tuto mais je bloque au moment ou le bouton envoyer de type INPUT se retrouve avec l'image validation en sous impression...
Les croix rouges et "coches" vertes se mettent bien ou il faut sur les autres champs.
Bref, ma question est : Comment différencier le style CSS des champs de type INPUT avec le bouton de type INPUT également ?
J'ai tenté d'inclure les champs dans une div avec une "cless" mais ensuite je ne trouve pas la syntaxe pour "jointer" en CSS la class et les pseudo classes INPUT:valid ou INPUT:invalid...

Voici ma page avec le formulaire : mon formulaire test

Merci pour votre aide.

2 réponses

Grafikart

Réponse acceptée

.class:valid, met une classe à tes champs ça sera plus simple :)

Germinator13

Auteur

Réponse acceptée

Le sujet est résolu par l'application de la pseudo-class de négation :not.
Il suffisait donc d'exclure des inputs le bonton de class .myButton comme suit :

input:valid:not(.myButton), textarea:valid{
    background:url(images/ok20.png) 98% center no-repeat;
    background-color:rgb(255,255,255);}

A+