0

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!

Community
  • 1
  • 1
ArjaaAine
  • 886
  • 5
  • 14
  • 27

1 Answers1

2

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.

Marcatectura
  • 1,721
  • 5
  • 30
  • 49
  • Ah, I gotcha. I have modernizr in my application where this caused issues. The jsfiddle I tested in IE10 and that's why it showed the error. I will look into modernizr :) – ArjaaAine Jan 24 '14 at 23:50