s style? OK, so in HTML5 browsers you can:
Geek Answers Handbook

What CSS is used by browsers to invalidate the <input type = "email"> s style?

OK, so in HTML5 browsers you can:

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

When the letter is not in the correct format, it places a red frame around it.

My question is: what is CSS that defines this style?

+7
source share
2 answers

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 the effect in a compatible browser:

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

Compliance with IE7 will 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/

+11
source

If you install the Firebug extension in Firefox and use it to check the form field in question, you can see the CSS that Firefox uses internally to style it. (Make sure the Show CSS User Agent checkbox is checked in the Style 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; }

Interestingly, they use box-shadow . There was a stack overflow question that I recently saw that mentioned a selector :-moz-ui-invalid : see an input style of type HTML5 if the validation is not completed .

+5
source

More articles:


All Articles