What CSS is used by browsers for styling invalid &

2020-02-11 03:50发布

OK, so in HTML5 browsers you can have:

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

When the email is not in the proper format it puts a red box around it.

My question is: what is the CSS that determines that style?

2条回答
成全新的幸福
2楼-- · 2020-02-11 04:06

If you install the Firebug extension in Firefox and use it to inspect the form field in question, you’ll be able to see the CSS that Firefox uses internally to style it. (Make sure “Show User Agent CSS” is ticked in the Style tab’s pop-up menu.)

In Firefox 5 on my Mac, it uses the following CSS:

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

Interesting they use box-shadow. There was a question on Stack Overflow I saw recently that mentioned the :-moz-ui-invalid selector: see Style HTML5 input types if validation fails.

查看更多
欢心
3楼-- · 2020-02-11 04:07

Depends on the browser. This should cover your bases:

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

Test out the effect in a compliant browser:

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

IE7 compliance would require:

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

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

Example: http://jsfiddle.net/AlienWebguy/cUgW4/

查看更多
登录 后发表回答