it-swarm.com.de

CSS zum Ausblenden des INPUT BUTTON-Wertetexts

Ich stelle gerade ein <input type='button'/>-Element mit dem folgenden CSS ein:

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

Ich möchte, dass die Schaltfläche als Bild angezeigt wird, jedoch nicht, dass der value-Text darüber angezeigt wird. Dies funktioniert wie erwartet für Firefox. Auf Internet Explorer 6 und Internet Explorer 7 kann ich den Text jedoch immer noch sehen.

Ich habe alle möglichen Tricks ausprobiert, um den Text zu verbergen, jedoch ohne Erfolg. Gibt es eine Lösung, um den Internet Explorer zu verhalten?

(Ich bin gezwungen, type=button zu verwenden, da dies ein Drupal-Formular ist und dessen Formular-API den Image-Typ nicht unterstützt.)

52
Scott Evernden

Warum enthalten Sie überhaupt das Attribut value? Aus dem Speicher müssen Sie sie nicht angeben (obwohl HTML-Standards dies möglicherweise angeben - nicht sicher). Wenn Sie ein value-Attribut benötigen, geben Sie einfach value="" an.

Wenn Sie diesen Ansatz verwenden, benötigt Ihr CSS zusätzliche Eigenschaften für die Höhe und Breite des Hintergrundbildes.

6
Phil.Wheeler

Ich benutze

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

Ich hatte das gegenteilige Problem (funktionierte in Internet Explorer, aber nicht in Firefox). Für Internet Explorer müssen Sie die linke Auffüllung hinzufügen, und für Firefox müssen Sie transparente Farbe hinzufügen. Hier ist unsere kombinierte Lösung für eine 16px x 16px-Schaltfläche:

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

gut:

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

arbeit super für mich!

20

Haben Sie versucht, die Eigenschaft text-indent auf etwa -999em zu setzen? Das ist eine gute Möglichkeit, Text zu "verstecken". 

Oder Sie können die Schriftgröße auf 0 setzen, was auch funktionieren würde.

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

9
Ryan Doherty

Der Unterschied, den einige von Ihnen in Lösungen sehen, die in den verschiedenen IEs funktionieren oder nicht funktionieren, kann darin liegen, dass der Kompatibilitätsmodus aktiviert oder deaktiviert ist. In IE8 funktioniert der Text-Einzug einwandfrei , es sei denn, der Kompatibilitätsmodus ist aktiviert. Wenn der Kompatibilitätsmodus aktiviert ist, lösen Schriftgröße und Zeilenhöhe den Trick aus, können jedoch die Anzeige von Firefox durcheinander bringen.

Wir können also einen CSS-Hack verwenden, damit Firefox unsere Regel ignorieren kann.

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

Ich hatte dies von irgendwo notiert:

hinzufügen von Textumwandlung zur Eingabe, um sie zu entfernen

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

Schreiben Sie in Ihre CSS-Datei:

#your_button_id 
    {
        color: transparent;
    }
2

Das Anwenden von font-size: 0.1px; auf die Schaltfläche funktioniert für mich in Firefox, Internet Explorer 6, Internet Explorer 7 und Safari. Keine der anderen Lösungen, die ich gefunden habe, funktionierte in allen Browsern.

2
patrick

Verwenden Sie Bedingungsanweisungen oben im HTML-Dokument:

<!--[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 im CSS hinzufügen

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

Genommen von HTML5 Boilerplate - genauer paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

2
Rob B

Dies funktioniert in Firefox 3, Internet Explorer 8, Internet Explorer 8-Kompatibilitätsmodus, Opera und Safari.

* Hinweis: Die Tabellenzelle, die diese enthält, 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;
1
DD

overflow:hidden und padding-left funktionieren 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;
1
Niels
color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */
0
Somu

Ich hatte das gleiche Problem. Und wie in vielen anderen Beiträgen berichtet wurde, funktioniert der Padding-Trick nur für IE.

font-size:0px zeigt immer noch einige kleine Punkte.

Das Einzige, was für mich funktioniert hat, ist das Gegenteil

font-size:999px

... aber ich hatte nur Knöpfe von 25x25 Pixeln.

0
Dave

Stattdessen mache einfach einen hook_form_alter und mache die Schaltfläche zu einer Bildschaltfläche und du bist fertig!

0
Bhavin Joshi

Das Folgende hat für mich am besten funktioniert:

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 nicht value in Ihrem <input type="submit"/> setzen, wird der Standardtext "Senden" in Ihre Schaltfläche eingefügt. Setzen Sie also einfach den font-size: 0; in Ihrem Submit und stellen Sie sicher, dass Sie für Ihren Eingabetyp eine height und eine width setzen, damit Ihr Bild angezeigt wird. Vergessen Sie auf keinen Fall die Medienanfragen für das Senden, wenn Sie sie benötigen, zum Beispiel:

CSS:

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

Dies bedeutet, wenn der Bildschirm genau 600px breit oder größer ist, ändert die Schaltfläche ihre Abmessungen.

0
Jonathan James