Comment rendre la valeur dans le bouton Soumettre, transparent?

Question

J'ai un bouton de soumission dans un formulaire et j'utilise une classe CSS qui définit une image d'arrière-plan comme le bouton de soumission. Je dois donner une valeur à ce bouton de soumission, mais je ne veux pas qu'il soit affiché à l'utilisateur. Si je mets la propriété couleur css à la transparence, cela fonctionne très bien dans mon firefox 3.6. Mais la valeur est affichée en 6 et 7. Comment puis-je résoudre ce problème?

<div id="upldTempForm" class="pgcontent"> 
    <form> 
    <div style="text-align:center;"> 
     <input type="submit" name="create" value="" class="save" /> 
     <input type="button" name="cancel" value="" class="cancel"/> 
    </div> 
    </form> 
</div> 

css 

.pgcontent { 
    background-color:#ECECEC; 
    border:2px solid #E7E7E7; 
    margin:30px auto; 
    width:820px; 
    font-size:12px; 
} 

.save{ 
    background-image:url("../images/save.gif"); 
    background-repeat:no-repeat; 
    width:100px; 
    height:40px; 
    cursor:pointer; 
    background-color:transparent; 
    border:none;  
} 

.cancel{ 
    background-image:url("../images/cancel.gif"); 
    background-repeat:no-repeat; 
    width:110px; 
    height:40px; 
    cursor:pointer; 
    background-color:transparent; 
    border:none; 
} 

Answer 1

L'utilisation du retrait de texte fonctionnera.

Exemple:

INPUT[type=button], INPUT[type=submit] 
{ 
    font-weight: bold; 

    color: #000000; 

    text-indent: -99999px; 
    text-align: center; 

    background-color: Transparent; 
    background-image: url(../images/button.png); 
    background-repeat: no-repeat; 

    cursor: pointer; 
} 

fait quelques recherches peu après le commentaire de nailxx. IE est un briseur d'affaire (encore une fois).

Pour IE:

font-size: 0; 
display: block; 
line-height: 0; 

Solution

<div id="upldTempForm" class="pgcontent"> 
<form> 
    <div> 
     <input type="submit" name="create" value="Create" class="save" /> 
     <input type="button" name="cancel" value="Cancel" class="cancel"/> 
    </div> 
</form> 
</div> 

css 

.pgcontent 
{ 
    background-color:#ECECEC; 
    border:2px solid #E7E7E7; 
    margin:30px auto; 
    width:820px; 
    font-size:12px; 
    text-align:center; 
} 

.save 
{ 
    background-image:url("../images/save.gif"); 
    background-repeat:no-repeat; 
    width:100px; 
    height:40px; 
    cursor:pointer; 
    background-color:transparent; 
    border:none;  

    line-height: 100; 
    overflow: hidden; 
} 

.cancel 
{ 
    background-image:url("../images/cancel.gif"); 
    background-repeat:no-repeat; 
    width:110px; 
    height:40px; 
    cursor:pointer; 
    background-color:transparent; 
    border:none; 

    line-height: 100; 
    overflow: hidden; 
} 

Answer 2

Vous devriez essayer d'utiliser au lieu de dans ce cas.

<button type="submit" name="aa" value="asdf"> <img src="http://www.w3schools.com/images/compatible_safari.gif"/> </button> Cela devrait faire l'affaire.