Rimuovi il bordo rosso predefinito per la convalida HTML5 su FireFox/Internet Explorer 11

Question

Sto cercando di fornire uno stile personalizzato al modulo convalidato in HTML5. Sono stato in grado di ignorare i messaggi e modificare il modulo, tuttavia, non riesco a sbarazzarmi del bordo rosso attorno agli elementi non validi in IE11.

Chrome si comporta come mi piace, senza bordi, tuttavia IE11 e Firefox mostrano il rosso attorno al campo.

Ho provato ad aggiungere seguente:

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

Ma non era successo - ho potuto solo aggiungere supplementare del bordo, non ignorare/rimuovere quella originale. Posso anche vedere che hanno una diversa modalità di funzionamento: il bordo rosso che sto cercando di eliminare viene applicato in IE solo dopo aver premuto il pulsante di invio. Il modulo inizia solo con il bordo della calce, quando premo semplicemente submit, quindi viene aggiunto anche il bordo rosso. Mettere i dati giusti rimuove entrambi i bordi istantaneamente (questo è in IE11). Firefox, d'altra parte, inizia con entrambi i bordi rossi e calce applicati.

esempio completa: http://jsfiddle.net/zbyzhbdm/5/

Esiste un modo per rimuovere il bordo rosso/impostarlo colore diverso? Mi piacerebbe davvero utilizzare la convalida HTML5 nativa senza ricorrere al mio script di convalida.

Aggiornamento: Firefox possono essere persuasi di rimuovere il confine con la seguente esclusione:

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

(tutti i dettagli a http://jsfiddle.net/zbyzhbdm/7/)

IE ancora andare e capire.

Answer 1

Provare la proprietà css outline anziché border.