Usuń domyślną czerwoną ramkę do sprawdzania poprawności HTML5 w FireFox/Internet Explorer 11

Question

Próbuję zapewnić niestandardową stylizację do formularza zatwierdzonego przez HTML5. Udało mi się przesłonić wiadomości i ulepszyć formularz, jednak nie jestem w stanie pozbyć się czerwonej granicy wokół nieprawidłowych elementów w IE11.

Chrome zachowuje się tak, jak lubię, bez żadnych granic, jednak IE11 i Firefox pokazują czerwień wokół pola.

Próbowałem dodając następujący:

input:required {...} 
input:valid {...} 
input:invalid {...} 

Ale nie był udany - mogę tylko dodać dodatkowe granicy, nie zastępują/usuń oryginalny. Widzę też, że mają inny tryb działania - czerwona granica, którą próbuję się pozbyć, zostanie zastosowana w IE dopiero po naciśnięciu przycisku "prześlij". Formularz zaczyna się od granicy limonki, kiedy po prostu naciśnie przycisk submit, a następnie zostaje dodana czerwona ramka. Umieszczenie właściwych danych powoduje natychmiastowe usunięcie obu granic (w IE11). Z drugiej strony, Firefox zaczyna od nałożenia obramowania czerwonego i limonkowego.

Pełny przykład: http://jsfiddle.net/zbyzhbdm/5/

Czy istnieje jakiś sposób, aby usunąć czerwone obramowanie/ustawić go na inny kolor? Naprawdę chciałbym użyć natywnego sprawdzania poprawności HTML5 bez odwoływania się do mojego własnego skryptu sprawdzania poprawności.

Aktualizacja: Firefox może się przekonać, aby usunąć obramowanie z następującym ręcznym:

input:invalid { 
    box-shadow: none !important; 
} 

(pełne dane w http://jsfiddle.net/zbyzhbdm/7/)

IE nadal iść i dowiedzieć się.

Answer 1

Wypróbuj właściwość css outline zamiast border.