dane wejściowe: nieprawidłowa reguła css jest stosowana przy ładowaniu strony.

Question

Sprawdź te dwa fiddle w przeglądarce Firefox lub Chrome. Po jednym, mam prosty formularz z atrybutem required i przyciskiem submit. Naciśnięcie przycisku "prześlij", gdy pudełko jest puste, powoduje, że jest on oznaczony jako invalid (w przeglądarce Firefox - czerwony kontur). Czeka jednak, aż wciśniesz przycisk przesyłania, aby pokazać, że jest on nieprawidłowy.

Teraz spróbuj this jeden. Jest identyczny z tym, że istnieje jakiś css:

input:invalid{ 
    border-color:orange 
} 

Poza tym czasie kolor pomarańczowy granica jest stosowana nawet przed submit jest wciśnięty. Więc jeśli i tylko jeśli ręcznie ustawisz styl dla formularza, przeglądarka zastosuje go wcześniej, co nie jest intuicyjne. Oczywiście wymagane pole będzie nieprawidłowe przed wpisaniem czegokolwiek.

Czy istnieje sposób, aby to naprawić?

Answer 1

Oto co szukasz: http://jsfiddle.net/CaseyRule/16fuhf6r/2/

projektować je tak:

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

a następnie dodać ten JS:

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

Nie wierzę, że to sposób, aby osiągnąć to jeszcze bez javascript.

Answer 2

Może to działa:

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

ten zastąpi wszelkie inne kolory obramowania przypisane do wejścia, kiedy jest nieprawidłowy.

Answer 3

W Firefoksie można użyć:

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

Ta klasa pseudo dodany przez przeglądarkę, aby dać czerwoną poświatę. Nie jest dodawany przy ładowaniu strony lub wszystkie wejścia miałyby ten blask. Nie znalazłem odpowiednika w innych przeglądarkach.