Discussion :

[oursblanc]

Bonjour,
Je cherche à modifier les éléments graphiques de mes pages en fonction d'un style (un peu comme on appliquerait un look and feel en swing).
Je cherche à donner une apparence à mes boutons, checkbox, comboBox et bouton radio.
Pour les boutons, j'ai écrit ce code (ça ne me semble pas très générique donc si vous avez des idées d'améliorations). Il marche avec Firefox mais pas avec IE. Comment faire ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
body {
	background:#DDDDDD;
	/*background:#FFFFFFF;*/
	/* dessous seulement suporte par IE*/
	scrollbar-arrow-color:red;
	scrollbar-face-color:#BFCFFF;
	scrollbar-track-color:#0033CC;
}
 
/*------------------------------------------------------------------------------- */
 
/*input[type=submit] {*/
input[type=submit]  {
    display: block; /* la balise a doit être en bloc */
     width: 32px; /* largeur de l'image réactive */
     height: 22px; /* hauteur de l'image réactive */
     background-color: transparent;
     background-image: url(button_in.png);
     background-repeat: no-repeat;
     border : none;
}
input[type=submit]:hover {
    display: block; /* la balise a doit être en bloc */
     width: 32px; /* largeur de l'image réactive */
     height: 22px; /* hauteur de l'image réactive */
     background-color: transparent;
     background-image: url(button_hover.png);
     background-repeat: no-repeat;
     border : none;
}

[gorgonite]

avec IE, il y a cette solution qui marche... mais d'un point de vue validité du code, je doute

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.btsub {
   width: 128px;
   height: 128px;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent url(submit.gif) no-repeat top left ;
   text-indent: 3000px;/* On cache le texte de substitution (très loin car Opera l'affiche même en dehors du boutton : il faut donc le faire sortir de la page)*/
   cursor: pointer;  /* pour transformer de pointeur en main */
}
.btsub:hover {
   background-position: 0 -128px;/* On déplace l'image d'arrière plan pour donner l'effet */
}
 
<button type="submit" class="btsub">Envoyer</button>