bouton et CSS

Version imprimable

bouton et CSS

Bonjour !

J'ai besoin d'aide...

Je cherche à changer la couleur de mes boutons de formulaire, jusqu'a present je faisais ansi :

Code:

1
2
3
4
5
6
7
	<input type="submit" name="upload" value="Envoyez" style="font-weight:bold; background-color:#CCCCFF;" 
	onMouseOver="this.style.color='#FFFFFF'; this.style.backgroundColor='#0000FF';" 
	onMouseOut="this.style.color='#000000'; this.style.backgroundColor='#CCCCFF';" >
 
	<input type="reset" value="Effacer" style="font-weight:bold; background-color:#CCCCFF;" 
	onMouseOver="this.style.color='#FFFFFF'; this.style.backgroundColor='#0000FF';" 
	onMouseOut="this.style.color='#000000'; this.style.backgroundColor='#CCCCFF';" >

mais aujourd'hui je cherche à utiliser ma feuille de style :

Code:

1
2
3
.bouton { font-weight:bold; background-color:#CCCCFF;" }
.boutonOVER  { color:#FFFFFF; background-color:#0000FF; } 
.boutonOUT  { color:#000000; background-color:#CCCCFF; }

et j'ai modifié mon code :

Code:

1
2
3
4
5
6
7
	<input type="submit" name="upload" value="Envoyez" class="bouton" 
	onMouseOver="this.className='boutonOVER';" 
	onMouseOut="this.className='boutonOUT';" >
 
	<input type="reset" value="Effacer" class="bouton" 
	onMouseOver="this.className='boutonOVER';" 
	onMouseOut="this.className='boutonOUT';" >

évidament cela ne marche pas... les buotons sont de bonne couleur au départ et au passage de la souris et redeviennent gris standard de base idem quand la souris quitte le bouton...

Pouvez-vous m'aidez ? MERCI !

04/07/2007, 20h46
Bisûnûrs

Tu as un guillemet en trop dans ton code CSS (merci la coloration syntaxique du forum).
04/07/2007, 21h01
seb nantes

la honte
Oupsss... merci la couleur et désolé d'encombrer le forum avec mes fautes de frappes ! :oops: car maintenant ce marche...! merci !
J'en profite pour demander autre chose sur le même sujet :
est-il possible de modifier directement la class input ?
un truc du genre :
Code:

1 2 3 input.submit { font-weight:bold; background-color:#CCCCFF; } input.reset { font-weight:bold; background-color:#CCCCFF; }
Cela éviterai de créer une nouvelle classe et d'avoir à rajouter class="bouton" dans mon code...
04/07/2007, 21h08
Bisûnûrs
Il existe une syntaxe qui fonctionne avec Firefox mais pas avec IE6 (7 je ne sais pas) :
Code:

1 2 3 4 input[type=submit]{ font-weight:bold; background-color:#CCCCFF; }
Si tu ne veux pas utiliser cette syntaxe, tu es obligé de passer par des classes.