web-dev-qa-db-fra.com

Comment puis-je créer mon <input type = "submit" /> une image?

J'ai une belle petite image CSS qui doit être un bouton. J'ai essayé environ 20 méthodes différentes, dont aucune ne fonctionne. Je reçois juste un rien vide ou une bordure sans rien à l'intérieur.

Le 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 fonctionner cela avec CSS. Merci de votre aide!

csstypesinputsubmit
21
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;
}
33
Zoltan Toth

Utilisez un bouton de soumission d'image, comme le doc dit:

<input type="image"> définit une image comme un bouton d'envoi

<input type=image src=button.png alt="Submit feedback">

(Je n'utiliserais pas une image suggérant le courrier électronique lors de la configuration d'un formulaire en ligne, mais il y a peut-être une raison de créer de telles associations.)

39
Jukka K. Korpela

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

Par exemple, ajouter ceci à votre CSS fait l'affaire 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'utilisez pas le CSS du navigateur pour le bouton, vous ne devriez probablement pas utiliser <input type='submit'> du tout, et il suffit d'insérer l'image (via un <img src="" /> tag ou <div> avec l'image en arrière-plan) et attachez-y un écouteur de clic.

Par exemple:

Le html:

<div class="controls">
    <img src="/yourimage.png" />
</div>

Le javascript (en supposant que vous utilisez jQuery):

$('.controls img').click(function(){... stuff to do...});
1
Tom

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/

1
NetStarter

moyen simple et facile de créer une balise INPUT en tant qu'image

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