Eingabe: Ungültige CSS-Regel wird beim Laden der Seite angewendet

Question

Sehen Sie sich diese beiden Fideln in Firefox oder Chrome an. In this eins, ich habe nur ein einfaches Formular mit einem required Attribut und einem submit Knopf. Drücken Sie "Senden", wenn das Feld leer ist, wird es als invalid formatiert (in Firefox ist es eine rote Umrandung). Aber es wartet, bis Sie auf "Senden" klicken, um zu zeigen, dass es ungültig ist.

Jetzt versuchen this eins. Es ist identisch, mit der Ausnahme, dass es einige CSS:

input:invalid{ 
    border-color:orange 
} 

Außer dieser Zeit die orangefarbene Randfarbe aufgetragen wird sogar vor einreichen gedrückt wird. Wenn Sie also nur einen invalid Stil für ein Formular manuell festlegen, wendet der Browser es vorher an, was nicht intuitives Verhalten ist. Natürlich ist ein Pflichtfeld ungültig, bevor Sie etwas eingeben.

Gibt es eine Möglichkeit, das zu beheben?

Answer 1

Hier ist, was Sie suchen: http://jsfiddle.net/CaseyRule/16fuhf6r/2/

Stil es wie folgt aus:

form.submitted input:invalid{ 
    border-color:orange 
} 

Und dann fügen Sie diese js:

$('input[type="submit"]').click(function(){ 
    $('form').addClass('submitted'); 
}); 

Ich glaube nicht, es ist ein Weg, dies noch ohne Javascript zu erreichen.

Answer 2

Vielleicht funktioniert:

input:invalid{ 
    border-color:orange !important; 
} 

Dadurch werden alle anderen -grenzfarben dem Eingang zugewiesen überschreiben, wenn es ungültig ist.

Answer 3

In Firefox können Sie:

:-moz-ui-invalid:not(output) 

Dies ist die Pseudo-Klasse vom Browser hinzugefügt, um den roten Schein zu geben. Es wird nicht beim Laden der Seite hinzugefügt oder alle Eingaben würden dieses Leuchten haben. Ich habe das Äquivalent in anderen Browsern nicht gefunden.