Wie kann ich ein Hintergrundbild auf eine Texteingabe anwenden, ohne die Standard-Grenze in Firefox und WebKit-Browsern zu verlieren?

StackOverflow https://stackoverflow.com/questions/1100409

Frage

Aus irgendeinem Grund die meisten modernen Browser schrecken, um ihre Standard-Eingaberahmenstil Anwendung Boxen in Text, wenn Sie ihnen ein Hintergrundbild geben. Stattdessen erhalten Sie, dass hässlichen Einsatz Stil. Von dem, was ich sagen kann, es gibt keine CSS Art und Weise den Standard-Browser-Stil entweder anzuwenden.

IE 8 hat dieses Problem nicht. Chrome 2 und Firefox 3.5 tun und ich nehme auch anderen Browser. Von dem, was ich online IE 7 hat das gleiche Problem gelesen habe, aber das Post keine Lösung hat.

Hier ist ein Beispiel: 

<html>
<head>
  <style>
    .pictureInput {
      background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <input type="text" class="pictureInput" />
  <br />
  <br />
  <input type="text">
</body>
</html>

In Chrome 2 sieht es wie folgt aus: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

Und in Firefox 3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

Update: JS Lösung: Ich hoffe, noch eine reine CSS-on-the-Eingang Lösung zu finden, aber hier ist die Abhilfe, die ich jetzt verwenden werden. Bitte beachten Sie, dies ist klebt direkt aus meiner app so ist kein schönes, Stand-alone Beispiel wie oben. Ich habe enthalten nur die relevanten Teile aus meinem großen Web-App. Sie sollten die Idee bekommen können. Der HTML-Code ist der Eingang mit der „link“ Klasse. Die große vertikale Hintergrundposition ist, weil es ein Sprite ist. Getestet in IE6, IE7, IE8, FF2, FF3.5, Opera 9.6, 10 Opera, Chrome 2, Safari 4. Ich brauche die Hintergrundposition ein paar Pixel in einigen Browsern noch zwicken:

JS: 

 $$('input.link').each(function(el) {
   new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
   if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
 });

CSS: 

input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }

Update: CSS Close Enough Lösung: Basierend auf den Vorschlag von Kron hier ist die CSS die Eingaben machen übereinstimmen FF und IE in Vista, die eine gute Wahl macht, wenn Sie aufgeben, auf reine Standardwerte entscheiden und erzwingen einen Stil. Ich habe seine leicht modifiziert und hinzugefügt, um die „bläulichen“ Effekte:

CSS: 

input[type=text], select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
War es hilfreich?

Lösung

Sie wieder zurück auf den sehr einfachen Rendering-Modus

Wenn Sie Grenze oder Hintergrundstil auf Texteingaben ändern. Texteingaben, die os-Stil sind in der Regel überlagert (wie Flash ist), die auf dem Dokument wiedergegeben werden.

Ich glaube nicht, dass es ein reines CSS-Fix für Ihr Problem ist. Das Beste, was zu tun - meiner Meinung nach - ist, einen Stil zu wählen, die Sie mögen und emulieren es mit CSS. So dass, egal welchen Browser Sie sind in, werden die Eingänge gleich aussehen. Sie können immer noch Hover-Effekte und dergleichen haben. OS X Stil Glüheffekte könnte schwierig sein, aber ich bin sicher, dass es machbar ist.

@ Alex Morales: Ihre Lösung ist redundant. border: 0; wird zugunsten der Grenze ignoriert: 1px solid # abadb3; und führt zu unnötigem Bytes über den Draht übertragen.

Andere Tipps

Dies ist die CSS, die ich, dass kann der Standard bieten zurück: 

input, select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 2px #f1f4f7 solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

Sie können auch :active anwenden und die Kontrollen geben, dass bläulichen Farbton, wenn sie ausgewählt sind.

Aktualisieren

Ok, hier ist eine Abhilfe, die ich denke, ist Cross-Browser kompatibel. Das einzige Problem wäre, dass der Standardstil um einige Pixel unterscheidet, so könnte dies einige Optimierungen müssen. 

<html>
    <head>
        <style>
            .pictureInput {
                text-indent: 20px;
            }
            .input-wrapper {
                position:relative;
            }
            .img-wrapper {
                position:absolute;
                top:2px;
                left:2px;
            }
        </style>
    </head>
    <body>
        <div class="input-wrapper">
            <div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
            <input type="text" class="pictureInput" />
        </div>
        <br />
        <br />
        <input type="text">
    </body>
</html>

Durch die Verwendung von Absolut relative Positionierung Sie den absoluten div machen können (das Bild enthalten ist) in Bezug auf ihre Mutter absolute handeln, die von allen Browsern Ich weiß, über (nicht Unter IE6 Versionen zählen, IE6 + sind in Ordnung) verarbeiten kann. Die Anwender-Skalierung ein Problem sein könnte, aber das ist, wie es mit Abhilfen ist.

Auf der anderen Seite müssen Sie nicht alle Stile auf Ihre Eingaben ändern (mit Ausnahme von text-indent, aber Sie würden das tun sowieso hoffe ich).

Auf der anderen Seite, es ist nicht die hübscheste Abhilfe.

Alt

Ich weiß, das ist nicht das, was Sie wollen, aber man könnte so etwas machen zumindest alle Eingänge grenzen im Einklang tun. 

input {
    border-color:#aaa;
    border-width:1px;
}

Ich habe es nicht in allen Browsern versucht, aber da Sie nicht über die Grenze Stil setzen könnte es den native Stil, aber mit einer anderen Größe verwenden (obwohl Sie das auch überspringen können). Ich denke, der Schlüssel ist, um nur die Grenzfarbe zu etwas so eingestellt, dass alle Eingabefeldern die gleiche Grenze-Farbe verwenden und den Rest des Browser überlassen.

Ich hatte einen Texthintergrundbild, und das war auch ärgerlich ich. Also habe ich eine relativ

rund um die und hinzugefügt dann das Bild absolut über die positioniert.

Dann natürlich brauchte ich ein wenig mehr Javascript um das Bild zu verstecken, wenn es angeklickt wurde oder wenn der Eingang bekommt den Fokus von der Tabulatortaste oder durch an den Rand des Bildes geklickt wird.

Mit einem bisschen dieses Hantieren sah ziemlich gut aus mit IE8, Firefox, Chrome und Opera, aber es ist eine schreckliche Flickschusterei und es wäre schön, wenn der Browser es behebt.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top