CODEWITHSUNDEEP
csshtmlinternet-explorer-9
ArjaaAine
ArjaaAine

Reputation: 896

Override default css stylings for validation in IE9 +

http://jsfiddle.net/4LXkE/

The code:

<form>
<input type="text" name="name" id="name" placeholder="Name*" required="required" />
<input type="submit" />
</form>

In the above fiddle, you can see that in IE9+ (that's what my target browser is) the input box is surrounded by an ugly red highlight and a popup message to show it is a required field. I found the following question which is close, but doesn't give a full answer to my specific question:

override css for html5 form validation/required popup

In my application I have my own stylings (twitter bootstrap defaults) but they are hidden behind these styles which show up.

While I tried to debug the app in Developer tools, i couldn't find what CSS classes were being added or how.

Any help turning these off would be much appreciated, thanks!

Upvotes: 0

Views: 404

Answers (1)

Marcatectura
Marcatectura

Reputation: 1695

IE9 does not support the "required" attribute natively, and it is not part of the UA stylesheet.

Are you using Modernizr or something similar along with Bootstrap? In IE9, the "required" attribute is useless without a polyfill. (see caniuse or this article for more information) Please look at Modernizr for a solution to this problem. If you're using a polyfill already, you should be able to style the shim element to get the appearance you want.

Upvotes: 2

Related Questions