CSS pour masquer le BOUTON de SAISIE de texte valeur

Question

Je suis actuellement en train de style un <input type='button'/> avec le code CSS suivant:

background: transparent url(someimage);
color: transparent;

Je veux que le bouton pour afficher une image, mais je ne veux pas l' value texte à afficher sur le dessus de cela. Cela fonctionne très bien pour Firefox comme prévu. Cependant, sur Internet Explorer 6 et Internet Explorer 7, je peux toujours voir le texte.

J'ai essayé toutes sortes d'astuces pour cacher le texte, mais sans succès. Est-il une solution pour faire d'Internet Explorer se comporter?

(Je suis contraint d'utiliser type=button parce que c'est un Drupal forme et la forme de l'API ne les supporte pas d'image de type.)

Answer 1

J'utilise

button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0}  /* ie6 */
*+html button{font-size:0;display:block;line-height:0}  /* ie7 */

Answer 2

J'ai eu le problème inverse (qui a travaillé dans Internet Explorer, mais pas dans Firefox). Pour Internet Explorer, vous devez ajouter un padding à gauche, et pour Firefox, vous devez ajouter de la couleur transparente. Voici donc notre solution combinée pour une 16px x 16px bouton de l'icône:

input.iconButton
{
    font-size: 1em;
    color: transparent; /* Fix for Firefox */
    border-style: none;
    border-width: 0;
    padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
    text-align: left;
    width: 16px;
    height: 16px;
    line-height: 1 !important;
    background: transparent url(../images/button.gif) no-repeat scroll 0 0;
    overflow: hidden;
    cursor: pointer;
}

Answer 3

bien:

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

travail impressionnant pour moi!

Answer 4

Avez-vous essayé de définir le texte-tiret bien à quelque chose comme-999em? C'est un bon moyen de "cacher" le texte.

Ou vous pouvez définir la taille de police à 0, ce qui serait trop de travail.

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

Answer 5

Pourquoi êtes-vous y compris l' value d'attribut? À partir de la mémoire, vous n'avez pas besoin de le spécifier (bien que les normes HTML peut dire que vous n'avez - pas sûr). Si vous avez besoin d'un value d'attribut, pourquoi ne pas simplement" value=""?

Si vous prenez cette approche, votre CSS aura besoin de propriétés supplémentaires pour la hauteur et la largeur de l'image d'arrière-plan.