HTML / CSS Comment ajouter une image à l'entrée type = "bouton"?

Question

J'utilise les CSS ci-dessous, mais cela place une image au centre du bouton. Est-il possible d’aligner une icône à gauche ou à droite à l’aide de <input type="button"> , de sorte que le texte et l’image s’adaptent parfaitement?

 background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;
 

Answer 1

Si vous devez absolument utiliser input , essayez ceci:

 background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;
 

Il est généralement un peu plus facile d’utiliser un button avec un img :

 <button type="submit"><img> Text</button>
 

Cependant, les implémentations du navigateur de button pour la soumission sont incohérentes, de même que le fait que toutes les valeurs de bouton sont envoyées lorsque button est utilisé - ce qui supprime la détection du "quel bouton a cliqué" dans une formulaire de soumission multiple.

Answer 2

Cela devrait faire ce que vous voulez, en supposant que votre image de bouton mesure 16 x 16 pixels.

 <input type="button" value="Add a new row" class="button-add" />
 

 input.button-add {
    background-image: url(/images/buttons/add.png); /* 16px x 16px */
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat;  /* make the background image appear only once */
    background-position: 0px 0px;  /* equivalent to 'top left' */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
    height: 16px;           /* make this the size of your image */
    padding-left: 16px;     /* make text start to the right of the image */
    vertical-align: middle; /* align the text vertically centered */
}
 

Exemple de bouton:

Mettre à jour

S'il vous arrive d'utiliser Less, ce mélange peut vous être utile.

 .icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
    height: @icon-size * 2;
    padding-left: @icon-size + @icon-inset * 2;
    padding-right: @icon-inset;
    border: 1px solid @border-color;
    background: @background-color url(@icon-url) no-repeat @icon-inset center;
    cursor: pointer;
}

input.button-add {
    .icon-button("http://placehold.it/16x16", @background-color: #ff9900);
}
 

Ce qui précède est compilé en

 input.button-add {
  height: 32px;
  padding-left: 36px;
  padding-right: 10px;
  border: 1px solid #000000;
  background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
  cursor: pointer;
}
 

JSFiddle

Answer 3

     <button type="submit" style="background-color:transparent; border-color:transparent;"> <img src="images/button/masuk.png" height="35"/></button>
    <button type="reset" style="background-color:transparent; border-color:transparent;"> <img src="images/button/reset.png" height="35"/></button>
 

j'espère que ça, je t'aide

Answer 4

Si vous utilisez des feuilles de sprites, cela devient impossible et l'élément doit être encapsulé.

 .btn{
    display: inline-block;
    background: blue;
    position: relative;
    border-radius: 5px;
}
.input, .btn:after{
    color: #fff;
}
.btn:after{
    position: absolute;
    content: '@';
    right: 0;
    width: 1.3em;
    height: 1em;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}
 

Découvrez ce violon: http://jsfiddle.net/AJNnZ/