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

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

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

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

мой вопрос: Что такое CSS, который определяет этот стиль?

7
css forms html5 webforms

2 ответов

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

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/

11

Если вы установите расширение 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 типы входных данных при сбое проверки.

6