Какой CSS используется браузерами для недопустимого стиляs?

Question

ОК, поэтому в браузерах HTML5 вы можете иметь:

<input class="txt-box" type="email" name="email" rel="required" />

Когда электронное письмо не в правильном формате, оно помещается в красную рамку.

Мой вопрос: какой CSS определяет этот стиль?

Answer 1

Зависит от браузера.Это должно охватывать ваши базы:

input:invalid, input:-moz-ui-invalid {
    border:0;
    outline:none;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}

Проверьте эффект в совместимом браузере:

input[type="email"] {
    border:0;
    outline:none;
    box-shadow:none;
}

Для соответствия IE7 потребуется:

input.txt-box {
    border:0 !important;
    outline:none !important;
    box-shadow:none;
}

https://developer.mozilla.org/en/CSS/%3Ainvalid

Пример: http://jsfiddle.net/AlienWebguy/cUgW4/

Answer 2

Если вы установите расширение Firebug в Firefox и будете использовать его для проверки рассматриваемого поля формы, вы сможете увидеть CSS, который Firefox использует для внутреннего оформления. (Убедитесь, что во всплывающем меню вкладки «Стиль» установлен флажок «Показать пользовательский CSS-код».)

В Firefox 5 на моем Mac он использует следующий CSS:

:-moz-ui-invalid:not(output) {
    box-shadow: 0 0 1.5px 1px red;
}

Интересно, они используют box-shadow. Недавно я увидел вопрос о переполнении стека, в котором упоминается селектор :-moz-ui-invalid: см. Стиль ввода типов HTML5, если проверка не удалась .