Bouton CSS Valeur le Style

Si j'ai cette ligne de code:

<input type="submit" class="mybutton" name="add" value="Add new"/>

Comment puis-je utiliser le CSS pour mettre en forme les boutons de la valeur?
J'ai besoin d'ajouter une image avant de la valeur, donc j'avais besoin de cette ligne de code à la valeur de sortie:

<span class="add">Add new</span>

J'ai essayé des choses comme:

<input type="submit" class="mybutton" name="add" value="">
<span class="add">Add new</span></input>

haha, mais ce tout n'a aucun sens.

Quelqu'un un bon conseil?

MODIFIER

Wow merci pour la grande que des réponses rapides. J'ai oublié de mentionner que j'utilise un .Fichier CSS de "sexybuttons", donc je ne peux pas changer le style et la nécessité de l'autre approche.

<button type="submit">

Est ce que je cherchais. Merci beaucoup à tous.

OriginalL'auteur TMNuclear | 2012-11-21

  1. 4

    Vous pouvez essayer d'utiliser le button tag au lieu de input.

    <button type="submit" class="mybutton" name="add">
  <img src="path_to_image">
  <span class="add">Add new</span>
</button>

    Ou vous pouvez définir un background-image pour le bouton à l'aide de CSS.

    Si vous utilisez le <button> élément dans un formulaire HTML, les navigateurs différents peuvent présenter des valeurs différentes. Utilisation <input> pour créer des boutons dans un formulaire HTML.

    OriginalL'auteur Henrik

  2. 3

    Vous pouvez définir une image d'arrière-plan à l'aide de css et de l'appliquer à la touche comme ceci:

    css:

    input[type=button],input[type=submit],button{
    background:url(images/btn-verzend.jpg) no-repeat;
    width:91px;
    height:35px;
    line-height:35px;
    border:none;
    color:#FFF;
    cursor:pointer;
}

    html:

    <input type="submit" name="add" value="Send" />
<input type="button" name="add" value="Send" />
<button>Send</button>

    Qui a fonctionné pour moi.

    OriginalL'auteur RTB

  3. 2
    <input type="submit" class="mybutton" name="add" value="Add new"/>

    puis ajouter un css

    .mybutton{
   //use css background attributes
   background:transaparent url(//image);
}

    OriginalL'auteur Jhonathan H.

  4. 2

    j'espère que vous êtes à la recherche de ce...........

    DÉMO

    HTML

    <input type="submit" class="mybutton" name="add" value=""/>

    CSS

    .mybutton {
background: url(http://coursesandevents.anjaschuetz.net/wp-content/uploads/2010/01/submit_button_large_red.jpg) no-repeat 0 0;
  width:248px;
  height:262px;
  border:none;
}

    OriginalL'auteur Shailender Arora

  5. 1

    essayer: 

    <button type="submit" class="mybutton" name="add" value="">
  <span class="add">Add new</span>
</button>

    violon

    OriginalL'auteur Roman

  6. 1
    <input type="submit" class="mybutton" name="add" value="Add new"/>

.mybutton{
background:url(image.jpg)no-repeat;
height:12px;
width:12px;
color:#fff;
border:none
}

    OriginalL'auteur james

  7. 1

    HTML

    <input type="submit" class="mybutton" name="add" value="Add New" />​

    CSS

    input{
    background:#58D3F7 url(http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/home.png) no-repeat left;
    background-size:20px;
    padding:10px 25px;
    text-align:center;
    border:none; border-radius:3px; cursor:pointer

}​

    DÉMO

    OriginalL'auteur Sowmya

  8. 1

    Vous pourriez aussi le faire:

    <span id="addSubmitButton" class="add" class="mybutton">Add new</span>

    Ajouter ceci dans le fichier css:

    .mybutton:before{
content:"url(image.jpg)";
}

    ou vous pouvez utiliser jquery pour le faire sans changer votre code d'origine comme indiqué ci-dessous:

    $("#addSubmitButton").before("<img src='image.jpg' alt='image'/>");

    OriginalL'auteur ninjacoder