CSS INPUT-Taste Wert Text zu verbergen
https://stackoverflow.com/questions/600438
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich bin derzeit Styling ein <input type='button'/> Element mit dem folgenden CSS:
background: transparent url(someimage);
color: transparent;
Ich mag, dass die Taste als ein Bild zu zeigen, aber ich will nicht der value Text auf es angezeigt werden soll. Dies funktioniert gut für Firefox, wie erwartet. Doch auf dem Internet Explorer 6 und Internet Explorer 7 Ich kann immer noch den Text sehen.
Ich habe alle möglichen Tricks versucht, den Text, aber ohne Erfolg zu verbergen. Gibt es eine Lösung Internet Explorer verhalten zu machen?
(Ich bin gezwungen type=button zu verwenden, da diese eine Form Drupal ist und seine Form API nicht Bildtyp.)
Lösung
Warum auch Sie das value Attribut überhaupt? Aus dem Gedächtnis, brauchen Sie es nicht geben (obwohl HTML-Standards sagen können Sie tun - nicht sicher). Wenn Sie ein value Attribut tun müssen, warum nicht nur value="" angeben?
Wenn Sie diesen Ansatz nehmen, wird Ihr CSS benötigt zusätzliche Eigenschaften für die Höhe und Breite des Hintergrundbildes.
Andere Tipps
ich
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 */
Ich hatte das entgegengesetzte Problem (arbeitete in Internet Explorer, aber nicht in Firefox). Für Internet Explorer, müssen Sie links padding hinzuzufügen, und für Firefox, müssen Sie transparente Farbe hinzufügen. So, hier ist unsere kombinierte Lösung für eine 16px x 16px Symbol-Taste:
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;
}
gut:
font-size: 0;
line-height: 0;
Arbeit genial für mich!
Haben Sie versucht, die Text-indent-Eigenschaft auf etwas wie -999em Einstellung? Das ist eine gute Art und Weise zu ‚verstecken‘ Text.
Sie können auch die Schriftgröße auf 0 gesetzt, was auch funktionieren würde.
http://www.productivedreams.com / ie-nicht-intepreting-text-indent-on-submit-Tasten /
Der Unterschied einige von Ihnen in Lösungen sehen, die in den verschiedenen IEs arbeiten oder nicht zurückgeführt werden kann Kompatibilitätsmodus ein- oder ausgeschaltet zu haben. In IE8 arbeitet text-indent gerade fein es sei denn, Kompatibilitätsmodus eingeschaltet wird. Wenn Kompatibilitätsmodus eingeschaltet ist, dann font-size und line-height den Trick kann aber vermasseln Firefox-Display.
So wir einen CSS-Hack verwenden können, lassen firefox unsere dh Regel ignorieren .. wie so ...
text-indent:-9999px;
*font-size: 0px; line-height: 0;
Verwenden Sie bedingte Anweisungen an dem Anfang des HTML-Dokuments:
<!--[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]-->
Dann in den CSS hinzufügen
.ie7 button { font-size:0;display:block;line-height:0 }
Genommen von HTML5 Boilerplate - insbesondere paulirish.com/ 2008 / bedingtes-Stylesheets-vs-CSS-Hacks-Antwort-weder /
Ich hatte das von irgendwo notiert:
Hinzufügen von Text-Transformation zur Eingabe um es zu entfernen
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
Schreiben auf Ihre CSS-Datei:
#your_button_id
{
color: transparent;
}
Die Anwendung font-size: 0.1px; auf die Schaltfläche funktioniert bei mir in Firefox, Internet Explorer 6, Internet Explorer 7 und Safari. Keiner der anderen Lösungen, die ich gefunden habe, arbeitete in allen Browsern.
overflow:hidden und padding-left arbeiten gut für mich.
Für Firefox:
width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;
Für die IEs:
padding-left:1000px;
Dies funktioniert in Firefox 3, Internet Explorer 8, Internet Explorer 8-Kompatibilitätsmodus, Opera und Safari.
. * Hinweis: Tabellenzelle enthält, das hat padding:0 und 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;
Ich hatte das gleiche Problem. Und wie viele andere Beiträge berichtet: die Polsterung Trick funktioniert nur für IE
. font-size:0px zeigt immer noch einige kleine Punkte.
Das einzige, was für mich gearbeitet tut das Gegenteil
font-size:999px
... aber ich hatte nur die Tasten von 25x25 Pixel.
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
Das folgende hat am besten funktioniert für mich:
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;
}
Wenn Sie es nicht value auf <input type="submit"/> gesetzt wird legen Sie den Standardtext „Senden“ in Ihrer Taste. SO, setzen Sie einfach die font-size: 0; auf Ihrem einreichen und dann stellen Sie sicher, dass Sie eine height und width für Ihre Eingabe Typ festgelegt, so dass Ihr Bild angezeigt werden soll. Vergessen Sie nicht, Medien-Anfragen für Ihre einreichen, wenn Sie sie benötigen, zum Beispiel:
CSS:
@media (min-width:600px) {
input[type=submit] {
width:200px;
height: 44px;
}
}
Das bedeutet, wenn der Bildschirm genau 600px breit oder größer die Schaltfläche ist, wird es Dimensionen ändern
Stattdessen nur ein hook_form_alter tun und die Taste ein Bild Taste und Sie sind fertig!
color:transparent; und dann jede text-transform Eigenschaft funktioniert der Trick auch.
Zum Beispiel:
color: transparent;
text-transform: uppercase;
