web-dev-qa-db-fra.com

comment définir une image d'arrière-plan dans le bouton d'envoi?

comment définir une image d'arrière-plan dans le bouton d'envoi?

Je dois utiliser une image à la place du bouton d'envoi normal? quelle serait la meilleure solution en xhtml/css?

Le bouton doit avoir la même apparence dans tous les principaux navigateurs, y compris IE6 et IE7.

cssxhtml
19
Jitendra Vyas

La façon dont je le fais habituellement, est avec le css suivant:

div#submitForm input {
  background: url("../images/buttonbg.png") no-repeat scroll 0 0 transparent;
  color: #000000;
  cursor: pointer;
  font-weight: bold;
  height: 20px;
  padding-bottom: 2px;
  width: 75px;
}

et le balisage:

<div id="submitForm">
    <input type="submit" value="Submit" name="submit">
</div>

Si les choses sont différentes dans les différents navigateurs, je vous implore d'utiliser une feuille de style de réinitialisation qui définit toutes les marges, le remplissage et peut-être même les bordures à zéro.

31
Phaze Phusion

En règle générale, on utilise une (ou plusieurs) balises d'image, éventuellement en combinaison avec la définition d'images d'arrière-plan div en CSS pour agir en tant que bouton d'envoi. La soumission réelle se ferait en javascript lors de l'événement click.

Un tutorial sur le sujet.

5
Donald Byrd
.button {
    border: none;
    background: url('/forms/up.png') no-repeat top left;
    padding: 2px 8px;
}
5
muruga

je le fais comme ça bouton de couverture et l'image du milieu qui 

<button><img src="foldername/imagename" width="30px" height= "30px"></button>
1
Areej Qasrawi

Vous pouvez essayer le code suivant:

background-image:url('url of your image') 10px 10px no-repeat
0
user4546837