web-dev-qa-db-fra.com

CSS pour masquer le texte de la valeur INPUT BUTTON

Je suis en train de styler un élément <input type='button'/> avec le CSS suivant:

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

Je veux que le bouton apparaisse sous forme d'image, mais je ne veux pas que le texte value s'affiche par dessus. Cela fonctionne 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. Existe-t-il une solution pour que Internet Explorer se comporte?

(Je suis contraint d'utiliser type=button car il s'agit d'un formulaire Drupal et son API de formulaire ne prend pas en charge le type d'image.)

cssinternet-explorerdrupalinputtransparency
52
Scott Evernden

Pourquoi incluez-vous l'attribut value? De mémoire, vous n'avez pas besoin de le spécifier (bien que les normes HTML puissent le dire, pas sûr). Si vous avez besoin d'un attribut value, pourquoi ne pas simplement indiquer value=""?

Si vous adoptez 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.

6
Phil.Wheeler

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 */
50
Emily

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

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;
}
35
jsalwen

bien:

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

travail génial pour moi!

20
Stanislav Müller

Avez-vous essayé de définir la propriété text-indent à quelque chose comme -999em? C'est un bon moyen de "masquer" le texte. 

Ou vous pouvez définir la taille de la police sur 0, ce qui fonctionnerait aussi.

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

9
Ryan Doherty

La différence que certains d'entre vous voient dans les solutions qui fonctionnent ou non dans les différents IE peut être due à l'activation ou la désactivation du mode de compatibilité. Dans IE8, l'indentation du texte fonctionne très bien à moins que le mode de compatibilité ne soit activé. Si le mode de compatibilité est activé, alors taille de police et hauteur de ligne font l'affaire, mais peuvent gâcher l'affichage de Firefox.

Nous pouvons donc utiliser un hack css pour permettre à firefox d’ignorer notre règle ie .. comme si ...

text-indent:-9999px;
*font-size: 0px; line-height: 0;
3
msmithgu

Je l'avais noté de quelque part:

ajouter du texte à transformer pour le supprimer

input.button {
    text-indent:-9999px;
    text-transform:capitalize;
}
2
FLOQ Design

Ecrivez dans votre fichier CSS:

#your_button_id 
    {
        color: transparent;
    }
2
Sergey Povisenko

L'application de font-size: 0.1px; au bouton fonctionne pour moi dans Firefox, Internet Explorer 6, Internet Explorer 7 et Safari. Aucune des solutions que j'ai trouvées ne fonctionnait avec tous les navigateurs.

2
patrick

Utilisez des instructions conditionnelles en haut du document HTML:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Puis dans le CSS ajouter

.ie7 button { font-size:0;display:block;line-height:0 }

Extrait de HTML5 Boilerplate - plus spécifiquement paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

2
Rob B

Cela fonctionne dans Firefox 3, Internet Explorer 8, le mode de compatibilité d'Internet Explorer 8, Opera et Safari.

* Remarque: la cellule de tableau qui en contient a padding:0 et text-align:center.

background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;
1
DD

overflow:hidden et padding-left fonctionnent bien pour moi.

Pour Firefox:

width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;

Pour les IE:

padding-left:1000px;
1
Niels
color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */
0
Somu

J'ai eu le même problème. Et comme de nombreux autres articles ont rapporté: le tour de remplissage ne fonctionne que pour IE.

font-size:0px montre encore quelques petits points.

La seule chose qui a fonctionné pour moi est de faire le contraire

font-size:999px

... mais je n'avais que des boutons de 25x25 pixels.

0
Dave

Au lieu de cela, faites juste un hook_form_alter et faites du bouton un bouton d’image et le tour est joué!

0
Bhavin Joshi

Ce qui suit a fonctionné le mieux pour moi:

HTML:

<input type="submit"/>

CSS:

input[type=submit] {
    background: url(http://yourURLhere) no-repeat;
    border: 0;
    display: block;
    font-size:0;
    height: 38px;
    width: 171px;
}

Si vous ne définissez pas value sur votre <input type="submit"/>, le texte par défaut "Soumettre" sera placé dans votre bouton. SO, définissez simplement le font-size: 0; sur votre soumission, puis assurez-vous de définir height et width pour votre type d'entrée afin que votre image s'affiche. N'OUBLIEZ PAS les requêtes des médias pour votre soumission si vous en avez besoin, par exemple:

CSS: 

@media (min-width:600px) {
  input[type=submit] {
    width:200px;
    height: 44px;
  }
}

Cela signifie que lorsque l'écran a exactement 600px de large ou plus large, le bouton changera ses dimensions

0
Jonathan James