Die Eingabe der Hintergrundfarbe zerstört das Styling?

Question

Ich erstelle ein Formular, das validiert wird unter jQuery-Validierung . Ich möchte eine hellrote Hintergrundfarbe auf Eingaben anwenden, die ungültig sind und korrigiert werden müssen.

Wenn ich mich bewerbe background-color: #FFCCCC; auf die Eingabe, scheint die attraktive Gestaltung entfernt zu werden und ein harter Rahmen ersetzt sie. Zum Beispiel mit einer Texteingabe in Firefox:

Gestylte und ungestylte Texteingabe http://liranuna.com/strager/b/textbox-difference.png
( Live-Demo )

Dies tritt bei mehreren Browsern auf. Es tritt auch auf, wenn ich eine der folgenden Einstellungen vornehme background andere als #FFFFFF .

Gibt es eine Möglichkeit, das Styling zu erhalten, während eine Hintergrundfarbe angewendet wird?

Ich bin offen für Javascript-Lösungen, die den Stil irgendwie nachahmen.

Answer 1

Tut mir leid - jede Art von Styling von Eingabeelementen neigt dazu, ihre Betriebssystem-/Browser-Standardeinstellungen zu zerstören. Die Standardeingaben werden auf eine völlig andere Weise gerendert - es ist nicht so, dass sie im Browser als CSS-Stile kodiert sind, leider.

Am besten ist es, wenn Sie nicht versuchen, Ihre Eingaben mit rotem Hintergrund den normalen Eingaben nachzubilden, sondern ein eigenes, attraktives Styling entwickeln! Wenn Sie diese hellen Ränder mögen, verwenden Sie border: 1px #ccc solid . Wenn Sie runde Ecken mögen, nutzen Sie die border-radius y -moz-border-radius - Diejenigen, die bei der Entwicklung von Browsern auf dem neuesten Stand sind, werden sie haben. Diejenigen, die das nicht tun, werden den Unterschied nicht bemerken.

Kurz gesagt: Versuchen Sie nicht, die Eingaben in die Betriebssystemumgebung einzupassen, sondern passen Sie sie an das Erscheinungsbild Ihrer eigenen Website an. Dadurch wird das Design Ihrer Website insgesamt besser :)

Answer 2

Ich würde sagen, dass das standardmäßige (Windows 2000) Aussehen der Steuerelemente für die Browser-Anbieter einfacher zu implementieren ist. Ein Browser muss alles selbst zeichnen, einschließlich aller Steuerelemente. Dass sie in ihrem Standardstil nativ aussehen, ist nur eine kleine Annehmlichkeit für den Benutzer, aber ohne etwas wirklich Ausgefallenes (und Schwergewichtiges) wie WPF wird es schnell unhandlich, das Steuerelement korrekt mit den visuellen Stilen des Betriebssystems zu zeichnen und CSS angewendet.

Der genaue Stil hängt auch vom Betriebssystem ab, und daher ist eine Lösung, die Ihnen genau ein Aussehen bietet, möglicherweise nicht das, was die meisten Besucher Ihrer Website wünschen. Andererseits können Sie The One Look™ auch nur mit CSS erreichen. Wenn das zufällig so aussieht wie das native Aussehen auf einem bestimmten Betriebssystem, dann soll es so sein :-)

Das, wonach Sie suchen, lässt sich wahrscheinlich mit einem hellgrauen Rahmen und einem hellblauen Rahmen beim Hovern/Fokussieren ein wenig emulieren, um den Aero-Look von Vista und Windows 7 nachzubilden.

Answer 3

Hier verwendet der Browser sein Standard-Styling.

Ich würde vorschlagen, etwas wie das folgende CSS zu BEIDEN Eingängen hinzuzufügen, dann sehen sie einheitlich aus.

border: solid 1px #ccc;

Answer 4

Kurze Antwort: Nein.

Browser und Formularsteuerelemente sind zweifellos der uneinheitlichste Teil von CSS. Alles, was ich vorschlagen kann, ist die Verwendung eines 1px-Rahmens für Eingabefelder, da die meisten Browser etwas Ähnliches verwenden. CSS3 abgerundete Ecken sollte auch in ein paar Browsern funktionieren.

input.text {
  border: 1px solid #ccc;
  background-color: #fcc;
  border-radius: 4px;
  -moz-border-radius: 4px;
}

Sie finden diese Seite bei 456 Berea Street interessant. Es zeigt, wie jeder Browser unterschiedliche Stile auf Textfelder anwendet.

Answer 5

Prüfen Sie, welche Stile das normale Eingabefeld für den Rahmen erhält. Wenden Sie dies auch auf das Fehlerfeld an.