CSS pour masquer le texte de la valeur INPUT BUTTON
https://stackoverflow.com/questions/600438
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis en train de styliser un élément <input type='button'/> avec le code CSS suivant:
background: transparent url(someimage);
color: transparent;
Je souhaite que le bouton s'affiche sous forme d'image, mais je ne souhaite 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 obligé d'utiliser type=button car il s'agit d'un formulaire Drupal et que son API de formulaire ne prend pas en charge le type d'image.)
La solution
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 <=>?
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.
Autres conseils
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 */
J'ai eu le problème opposé (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. Alors, voici notre solution combinée pour un bouton icône 16px x 16px:
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;
}
bien:
font-size: 0;
line-height: 0;
travaille génial pour moi!
Avez-vous essayé de définir la propriété text-indent à quelque chose comme -999em? C'est un bon moyen de "masquer" le texte.
Vous pouvez également définir la taille de la police sur 0, ce qui fonctionnerait également.
http://www.productivedreams.com / ie-not-not -interpreting-text-indent-on-submit-buttons /
La différence que certains d'entre vous voient dans les solutions qui fonctionnent ou non dans les différents IE peut être due au fait que le mode de compatibilité est activé ou désactivé. Dans IE8, l'indentation du texte fonctionne parfaitement sauf si le mode de compatibilité est 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;
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]-->
Ensuite, dans l'ajout CSS
.ie7 button { font-size:0;display:block;line-height:0 }
Extrait de HTML5 Boilerplate - plus précisément paulirish.com/ 2008 / conditionnel-stylesheets-vs-css-hacks-answer-ni /
J'ai remarqué cela quelque part:
ajouter du texte à transformer pour le supprimer
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
Écrivez dans votre fichier CSS:
#your_button_id
{
color: transparent;
}
L’application 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 fonctionne avec tous les navigateurs.
overflow:hidden et padding-left fonctionnent correctement 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;
Ceci fonctionne dans Firefox 3, Internet Explorer 8, le mode de compatibilité d'Internet Explorer 8, Opera et Safari.
* Remarque: la cellule de tableau qui contient cela 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;
J'ai eu le même problème. Et comme beaucoup d’autres publications 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.
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
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 & sera soumis height et un 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 600 pixels de large ou plus, le bouton changera ses dimensions
Au lieu de cela, faites un hook_form_alter et faites du bouton un bouton d'image et vous avez terminé!
color:transparent; et toute propriété text-transform réussit également.
Par exemple:
color: transparent;
text-transform: uppercase;
