Comment puis-je faire mon & lt; input type = "submit" / & gt; une image?

J'ai une belle petite image CSS qui doit être un bouton. J'ai tenté d'environ 20 différentes méthodes, mais aucune de travail. Je viens d'obtenir un vide de rien ou une frontière avec rien à l'intérieur.

Le code html: http://lrroberts0122.github.com/DWS/lab6/level-2/

L'image: http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png

Le CSS: http://lrroberts0122.github.com/DWS/lab6/level-2/css/main.css

Je ne peux pas le changer pour "soumettre" pour certaines raisons, j'ai donc besoin de comprendre comment faire ce travail avec les CSS. Merci pour votre aide!

source d'informationauteur Lindsay

input[type=submit] {
    background: url(http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png);
    border: 0;
    display: block;
    height: _the_image_height;
    width: _the_image_width;
}

32

Utiliser une image bouton envoyer:
```
<input type=image src=button.png alt="Submit feedback">
```
(Je ne voudrais pas utiliser une image suggérant par courrier papier lors de la configuration d'un formulaire en ligne, mais peut-être il ya une raison pour créer de telles associations.)
1

Vous pouvez remplacer le style donné par le navigateur du bouton.

Par exemple en ajoutant ceci à votre css fait le truc pour moi (sur Chrome):
```
.controls input {
   background: url(' http://lrroberts0122.github.com/DWS/lab6/level-2/images/button.png') -411px -540px no-repeat;
   width: 199px;
   height: 109px;
   border: none;
}
```
Mais vraiment, si vous n'allez pas utiliser le css du navigateur pour le bouton, vous ne devriez probablement pas utiliser <input type='submit'> à tous, et il suffit d'insérer l'image (via un <img src="" /> balise ou un <div> avec l'image comme arrière-plan) et attacher un écouteur de clics.

Par exemple:

Le code html:
```
<div class="controls">
    <img src="/yourimage.png" />
</div>
```
Le javascript (en supposant que vous utilisez jQuery):
```
$('.controls img').click(function(){... stuff to do...});
```

HTML :

<lable>From css class</lable><input class="input" onclick="alert('clicked')" type="button" value="" /><br/>
<lable>From HTML tag</lable>
<input type="button" style="background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);" onclick="alert('clicked')"/>

CSS :

.btn{
    display: inline-block;
 background:url(http://cdn.sstatic.net/stackexchange/img/favicon.ico);
    position: relative;
    border-radius: 5px;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

JS Fiddle : http://jsfiddle.net/AJNnZ/26/

simple et facile de faire une balise INPUT comme une image

<input type="submit" value="" style="background-image: url('images/img.png'); border:none; background-repeat:no-repeat;background-size:100% 100%;">

0

Une autre façon c'est le genre de hackish est-ce (à l'aide de jQuery):
```
<div onclick="$(this).parent('form').submit();"></div>
```
Puis vous le style de votre div manière dont vous le souhaitez.

Vous devez vous connecter pour publier un commentaire.