Eingabe Hintergrundfarbe zerstört Styling?

Question

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

Wenn ich background-color: #FFCCCC; an den Eingang anwende, scheint das attraktive Styling entfernt zu werden und ein harter Rand ersetzt es. Zum Beispiel mit einer Texteingabe in Firefox:

Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)

Dies geschieht mit mehreren Browsern. Es tritt auch auf, wenn ich background anders als #FFFFFF einstelle.

Gibt es eine Möglichkeit, das Styling beim Auftragen einer Hintergrundfarbe beizubehalten?

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

Answer 1

Überprüfen Sie, welche Stile das normale Eingabefeld für den Rand erhält. Und wende das auch auf den Fehler an.

Answer 2

Ihre HTML ändern, so zu sein:

<p><input type="text" value="text" style="border:1px solid #999999;" /></p> 
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p> 

bearbeiten: Wenn Sie es in allen Browsern konsistent aussehen wollen und nicht nur leicht in Mozilla abgerundet dann werden Sie viel mehr zu tun haben, Arbeit. Here's a link, die Ihnen zeigt, wie Sie den Textboxstil vollständig außer Kraft setzen.

Answer 3

Hier verwendet der Browser sein Standard-Styling.

Ich würde vorschlagen, etwas wie die folgenden CSS zu BEIDE Eingänge hinzufügen, dann werden sie konsistent aussehen.

border: solid 1px #ccc; 

Answer 4

ich den Standard sagen würde (Windows 2000) Blick der Bedienelemente ist einfacher für die Browser-Hersteller zu implementieren. 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 Fantastisches (und Schwergewicht) wie WPF wird es schnell unpraktisch, das Steuerelement korrekt mit visuellen Stilen des verwendeten CSS zu zeichnen.

Der genaue Stil hängt auch vom Betriebssystem ab und daher ist eine Lösung, die genau einen Look liefert, möglicherweise nicht das, was die meisten Besucher Ihrer Site wünschen. Wenn Sie nur CSS verwenden, können Sie The One Look ™ erreichen. Wenn das auf einem bestimmten Betriebssystem so aussieht wie das Original, dann ist es so :-)

Was Sie suchen, könnte wahrscheinlich ein bisschen emuliert werden, indem Sie einen hellgrauen Rand und Hover verwenden/Fokussiere einen hellblauen, emuliert den Aero-Look von Vista und Windows 7.

Answer 5

Kurze Antwort: Nein.

Browser und Formularsteuerelemente ist ohne Zweifel der inkonsistenteste Teil von CSS. Alles, was ich vorschlagen kann, ist, einen 1px Rand an Eingabefeldern zu verwenden, da die meisten Browser etwas Ähnliches verwenden. CSS3 abgerundete Ecken sollten auch in einigen Browsern funktionieren.

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

Sie finden this page at 456 Berea Street interessant. Es zeigt, wie jeder Browser verschiedene Stile auf Textfelder anwendet.

Answer 6

Entschuldigung - jede Art von Styling auf Eingabeelementen neigt dazu, ihre OS/Browser-Standardeinstellungen zu zerstören. Die Standardeingaben werden auf eine völlig andere Art und Weise gerendert - es ist leider nicht so, dass sie in den Browser als CSS-Stile codiert sind.

Das Beste, was Sie hier tun können, ist, anstatt zu versuchen, Ihre rot-Hintergrund-Eingänge emulieren normale, erstellen Sie Ihre eigenen attraktiven Styling! Wenn Sie diese hellen Ränder mögen, verwenden Sie border: 1px #ccc solid. Wenn Sie runde Ecken mögen, nutzen Sie border-radius und -moz-border-radius - für diejenigen, die am Rande der Browser-Entwicklung sind, werden sie haben. Für diejenigen, die es nicht sind, werden sie den Unterschied nicht bemerken.

Kurz gesagt, versuchen Sie nicht, die Eingaben mit der Betriebssystemumgebung in Einklang zu bringen, sondern stylen Sie sie entsprechend dem Erscheinungsbild Ihrer eigenen Website. Dies wird insgesamt besseres Design für Ihre Website erstellen :)