Comment changer une image de bouton d'entrée en utilisant CSS?

Question

Donc, je peux créer un bouton avec une image à l'aide de

<INPUT type="image" src="/images/Btn.PNG" value="">

Mais, je ne peux pas obtenir le même comportement à l'aide de CSS. Par exemple, j'ai essayé

<INPUT type="image" class="myButton" value="">

où "myButton" est défini dans le fichier CSS comme

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

Si c'est tout ce que je voulais faire, je pourrais utiliser le style d'origine, mais je veux changer le bouton de l'apparence sur le vol stationnaire (à l'aide d'un myButton:hover de la classe). Je sais que les liens sont bons, parce que j'ai été en mesure de charger une image de fond pour d'autres parties de la page (juste pour vérifier). J'ai trouvé des exemples sur le web de façon à le faire à l'aide de JavaScript, mais je suis à la recherche d'un CSS solution.

J'utilise Firefox 3.0.3 si cela fait une différence.

Answer 1

Si vous voulez styler le bouton en utilisant CSS, faites-en un type = "soumettre" au lieu de type = "image". type = "image" attend un code SRC, que vous ne pouvez pas définir dans CSS.

Notez que Safari ne vous laissera pas styler n'importe quel bouton comme vous le souhaitez. Si vous avez besoin de la prise en charge de Safari, vous devez placer une image et disposer d'une fonction onclick qui soumet le formulaire.

Answer 2

Vous pouvez utiliser la balise <button> . Pour un envoi, ajoutez simplement type="submit" . Utilisez ensuite une image d'arrière-plan lorsque vous souhaitez que le bouton apparaisse en tant que graphique.

Ainsi:

 <button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>
 

Plus d'infos: http://htmldog.com/reference/htmltags/button/

Answer 3

HTML

 <div class="myButton"><INPUT type="submit" name="" value=""></div>
 

CSS

 div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}
 

Cela fonctionnera n'importe où, même dans Safari.

Answer 4

Cet article sur les CSS de l'image de remplacement pour les boutons de soumission pourrait aider.

"En utilisant cette méthode, vous obtiendrez une image cliquable lorsque les feuilles de styles sont actifs, et un bouton standard lorsque les feuilles de styles sont désactivés. L'astuce est d'appliquer l'image de remplacer les méthodes à un bouton de la balise et de l'utiliser comme le bouton soumettre, au lieu de l'aide de l'entrée.

Et puisque le bouton de frontières sont effacées, il est également recommandé de changer le bouton de curseur la main en forme de celui utilisé pour les liens, puisqu'il fournit un visuel astuce pour les utilisateurs."

Le code CSS:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Answer 5

Voici une solution plus simple mais sans div diviseur supplémentaire:

 <input type="submit" value="Submit">
 

Le CSS utilise une technique de base de remplacement d'image. Pour les points bonus, il montre en utilisant un sprite d'image:

 <style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>
 

Source: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/