Aus irgendeinem Grund werden die meisten modernen Browser nicht mehr ihren Standardrahmen für Eingabefelder auf Textfelder anwenden, wenn Sie ihnen ein Hintergrundbild geben. Stattdessen bekommst du diesen hässlichen Einsatzstil. Soweit ich das beurteilen kann, gibt es auch keinen CSS-Weg, den Standard-Browser-Stil anzuwenden.Wie kann ich ein Hintergrundbild auf eine Texteingabe anwenden, ohne den Standardrahmen in Firefox- und WebKit-Browsern zu verlieren?
IE 8 hat dieses Problem nicht. Chrome 2 und Firefox 3.5 tun und ich nehme auch andere Browser an. Von dem, was ich online gelesen habe, hat IE 7 das gleiche Problem, aber dieser Beitrag hatte keine Lösung.
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 bin immer noch der Hoffnung um eine reine CSS-on-the-Input-Lösung zu finden, aber hier ist die Problemumgehung, die ich für jetzt verwenden werde. Bitte beachten Sie, das ist direkt aus meiner App eingefügt, also ist es kein schönes, stand-alone Beispiel wie oben. Ich habe gerade die relevanten Teile aus meiner großen Web-App eingefügt. Sie sollten in der Lage sein, die Idee zu bekommen. Der HTML-Code ist die Eingabe mit der Klasse "link". 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 der CSS die Eingänge entsprechen FF und IE in Vista zu machen, die eine gute Wahl macht, wenn Sie entscheiden Aufgeben von reinen Vorgaben und Erzwingen eines Stils. 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; }
Hey, versuchen Sie das. Es ist ein wenig hackish, aber es scheint für mich zu funktionieren. Grenze: 0; Grenze: 1px Körper # abadb3; Die 'Grenze: 0' wird den Standardrahmen an der Eingabe beenden, und die folgende Regel wird es so aussehen lassen, wie Sie möchten. –
Sorry, ich war nicht klar. Das würde funktionieren, wenn ich einfach wollte, dass es eine feste Grenze hat, aber was ich will, damit es so aussieht, wie es in den Browsern tut, wenn es keinen Stil gibt. Ich möchte den nativen, standardmäßigen Rahmenstil. Siehe zum Beispiel den Stil in Firefox: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc –
Meine Antwort ist nicht redundant. Der Rahmen: 0 löscht den Rahmenstil am Eingang. Der folgende Stil wendet den neuen Stil auf die Eingabe an. Wie in Cascading Stylesheets;) –