[CSS3] formulaire et sélecteur de pseudo-classes

Bonjour à tous,
Je teste un formulaire simplifié :

<form id="inscription" method="#" action="#" novalidate>
<p>
  <label for="email">Votre eMail : </label>
  <input type="email" id="email" required />
  <span class="nonValide">mail pas valide</span>
  <span class="valide">mail valide</span>
	</p>
	<p>
		<input type="submit" id="envoi" value="Envoyer" />
	</p>
</form>

Avec ces CSS :

		input:focus:invalid {
			background: url(rouge.png) no-repeat 98% center;
		}
		input:focus:valid {
			background: url(vert.png) no-repeat 98% center;
		}
		span.nonValide {
			display: none;
			position: relative;
			left:  250px;
			top: 5px;
		}
		span.valide {
			display: none;
			position: relative;
			left:  250px;
			top: 5px;
		}
		input:focus:invalid ~ span.nonValide, input:focus:valid ~ span.valide {
			display: block;
		}

Mon problème est que le bouton d'envoi fait apparaître le point vert (background: url(vert.png) no-repeat 98% center;) au moment du clic dessus.
Comment ne pas avoir ce background pour le bouton.
J'ai essayé des sélecteurs de type :

input:focus:valid, :not(input#envoi):active {
		background: url(vert.png) no-repeat 98% center;
		}

Mais cela ne fonctionne pas.
Merci de votre aide
Modifié par GrosQuick (22 Sep 2011 - 17:35)

Hello.

Tu peux cibler ton submit spécifiquement avec input[type=submit] ou en lui rajoutant une classe (pour IE6). Puis surcharger la règle pour annuler le background.

Bonjour,

sauf erreur de ma part, ton :not ne fonctionne pas car tu ne l'appliques pas au bon endroit. Il me semble qu'il devrait prendre cette forme :

input:focus:not(#envoi):valid

à vérifier..

Bonjour,

Quand tu cliques un élément qui peut recevoir le focus (lien, bouton, tout élément avec tabindex="0"...), il prend à la fois l'état :active et l'état :focus.

Tu as des sélecteurs à la portée trop large (notamment input:focus). La solution n'est pas de contredire les règles qui s'appliquent à ces sélecteurs pour certains cas particuliers, mais plutôt de restreindre la portée de ces sélecteurs pour qu'ils ne s'appliquent qu'aux éléments souhaités.