Question

It seems that even when using shivs you can’t do something like input[type="search"] to style the new HTML5 input elements in IE7. You can see an example at http://jsfiddle.net/2tmAp/ (view it in IE7 modes of course).

Presumably IE7 is setting these elements to type="text" and even though the DOM itself is staying the same this still somehow prevents the styles from applying.

What would be the neatest way to fix this? Is there something we can do in Javascript to trick IE7 into applying the styles the same way as shivs work on elements?

Answer 1

The shiv is just a way to force-create the new elements regardless if supported or not. but addressing the type and attributes it a different thing, as well as the selectors. the fallbacks for the new "inputs" are the type "text". this goes for the search, datepicker, and others (can’t keep track of the new ones).

There are two keys to understanding why the automatic fallback works consistently in all major browsers:

• The default type for input elements is "text".
• All browsers ignore unknown attributes.

The consequence of these two points is that if you say <input type="foo" bar="baz"/>, all browsers will treat this identically to <input type="text"/> (unless "foo" is a recognized input type or "bar" is a recognized attribute of the input element).

since type="search" is unknown to IE7, it falls back to type="text" and you can’t pick it up in CSS as type="search" since it’s now type="text"

to address your selector issue, you can try using selectivizr which uses JS libraries’ abilities to do selector matching cross-browser (even in non-supporting browsers using a some pseudo-selector matching script). i don’t know if they pick-up shiv-created elements though.

or better, use the usual way to create a searchbox in HTML/JS as a fallback,

---

for an easy answer, i’d do what the other guy commented. Just create a class named "search" and apply this class name to all your search boxes. style them just the same as the one you used the selector with, just like:

input[type="search"],input.search{
    /*styles*/
}

<input type="search" class="search" />