web-dev-qa-db-fra.com

Comment changer une image de bouton de saisie en utilisant CSS?

Donc, je peux créer un bouton de saisie avec une image en utilisant

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

Mais, je ne peux pas avoir le même comportement en utilisant 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 souhaite modifier l'apparence du bouton en survol (à l'aide d'une classe myButton:hover). Je sais que les liens sont bons, car j'ai pu les charger pour une image d'arrière-plan pour d'autres parties de la page (juste pour vérifier). J'ai trouvé des exemples sur le Web montrant comment le faire en utilisant JavaScript, mais je cherche une solution CSS.

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

cssinput-button-image
182
Baltimark

Si vous souhaitez styliser le bouton à l'aide de CSS, faites-en un type = "submit" au lieu de type = "image". type = "image" attend un code SRC, que vous ne pouvez pas définir en CSS.

Notez que Safari ne vous laissera pas styler les boutons de la manière que vous recherchez. Si vous avez besoin de l’assistance Safari, vous devez placer une image et disposer d’une fonction onclick qui envoie le formulaire.

117
ceejayoz

Vous pouvez utiliser la balise <button>. Pour une soumission, ajoutez simplement type="submit". Utilisez ensuite une image d’arrière-plan lorsque vous souhaitez que le bouton apparaisse sous forme 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/

110
Dimitry

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.

72
SI Web Design

Cet article sur remplacement de l'image CSS pour les boutons d'envoi pourrait vous aider.

"En utilisant cette méthode, vous obtiendrez une image cliquable lorsque les feuilles de style sont actives et un bouton standard lorsque les feuilles de style sont désactivées. L'astuce consiste à appliquer les méthodes de remplacement d'image à une balise de bouton et utilisez-le comme bouton de soumission au lieu d'utiliser l'entrée.

Et puisque les bordures des boutons sont effacées, il est également recommandé de changer le curseur du bouton en une main en forme de main utilisée pour les liens, car cela fournit une astuce visuelle aux 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;
}
25
splattne

Voici une solution plus simple mais sans extra entourant div:

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

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

<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/

12
philoye

Voici ce qui a fonctionné pour moi sur Internet Explorer, une légère modification de la solution de Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}
2
user545376

Une variation sur les réponses précédentes. J'ai trouvé que l'opacité doit être définie, bien sûr, cela fonctionnera dans IE6 et sur. Il y avait un problème avec la solution line-height dans IE8 où le bouton ne répondait pas. Et avec cela, vous obtenez également un curseur de main!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}
2
Reed Richards

Je pense que ce qui suit est la meilleure solution:

css:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

html:

<input class="edit-button" type="image" src="transparent.png" />
2
inf3rno

Vous pouvez utiliser blank.gif (image transparente 1px) comme cible dans votre tag

<input type="image" src="img/blank.gif" class="button">

puis style fond en css:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}
2
dafyk

Ma solution sans js et sans images est la suivante:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* CSS:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}
1
John

Peut-être pourriez-vous également simplement importer un fichier .js et y remplacer l'image, en JavaScript.

0
Pythagorus