Comment modifier l'image d'un bouton input en CSS ?
Lorsque l'on conçoit le style d'un site internet, on peut avoir besoin de modifier le style des boutons de formulaire en utilisant une image de fond.
Lorsque l'on conçoit le style d'un site internet, on peut avoir besoin de modifier le style des boutons de formulaire en utilisant une image de fond. Il est possible d'utiliser la balise <input> avec comme type image mais on ne pourra pas faire de modification, par exemple changer d'image au passage de la souris. De plus, il sera nécessaire de prévoir une fonction JavaScript pour soumettre le formulaire au passage de la souris (lire le tuto connexe: Comment définir les cellpadding et cellspacing en CSS ?).
Exemple :
<input type=image src=/image.png value=/>
Il est plus facile d'utiliser le type submit pour une balise <input> car un clic dessus provoque directement la validation du formulaire, sans ajout de code supplémentaire. On peut ensuite modifier le style de cette balise à l'aide du langage CSS.
Exemple :
<input type=submit class=monBouton value=/>
.monBouton :
{
background:url(/image.png);
}
Cette solution est plus pratique mais n'est pas compatible avec le navigateur Safari.
Il existe d'autres solutions offrant une meilleure compatibilité avec les navigateurs. La première consiste à utiliser la balise <button>. Elle fonctionne de la même manière que la balise <input> mais permet de placer du code HTML à l'intérieur du bouton et donc une image. Il est également possible de placer la balise <input> au sein d'une balise <div>, que l'on pourra mettre en forme en CSS.
//Solution avec la balise <button>
<button type=submit>
<img src=/image.png>
</button>
//Solution avec la balise <div>
<div class=monBouton>
<input type=submit value=/>
</div>
.monBouton
{
background: url(/image.png);
}