[CSS 3] Coloration des champs avec CSS3 BUI

[popy67]

Bonjour,

J'ai développé un formulaire avec CSS3 BUI, seulement lorsque le champ email est vide la bordure apparait en vert comme si l'adresse était valide et lorsque je mets l'attribut required le contour apparait toujours dashed adresse valide... Comment faire pour qu'au départ quand le champ est vide une bordure dotted red apparait ?

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
input[type=email]:valid,
input[type=url]:valid,
input[type=number]:in-range
	{
	outline:1px green solid;	
	}
 
input[type=email]:invalid,
input[type=url]:invalid,
input[type=number]:out-of-range
	{
	outline:1px red dotted;	
	}
input[type=text]:optional
	{
	background:#eee;	
	}
input[type=email]:required
	{
	outline:2px red dashed;
	}
label
	{
	display:inline-block;
	width:10em;	
	}
</style>
 
 
<form>
<p>
<label for="obligatoire">Texte requis</label>
<input type="text" id="obligatoire" name="obligatoire" required>
</p>
 
<p>
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">
</p>
 
<p>
<label for="prenom">Prenom</label>
<input type="text" id="prenom" name="prenom" required>
</p>
</form>

Accessoirement est-ce que sous HTML5 une balise autofermante doit idéalement être terminée par /> ou est-ce obsolète et seulement obligatoire en XHTML ?

Merci d'avance pour vos lumières ^^

[miss_socrates]

Peut-être que cette page pourra t'aider
http://www.anysurfer.org/fr/lors-de-...s-par-du-texte