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

Ändern Sie Ihr HTML wie folgt:

<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 wollen, dass es in allen Browsern gleich aussieht und nicht nur in Mozilla leicht abgerundet ist, müssen Sie viel mehr Arbeit investieren. Hier ist ein Link die Ihnen zeigt, wie Sie den Textfeldstil vollständig überschreiben können.