All geek questions in one place

Unable to create new HTML5 input types in IE7 using type attribute selectors

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

Presumably, IE7 sets these elements to type="text" , and even if the DOM itself remains the same, it still somehow prevents the use of styles.

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

+4
source share
1 answer

Shiv is simply a way to force the creation of new elements, whether supported or not. but referring to the type and attributing to it another thing, as well as selectors. backups for new "inputs" are a type of "text" . this applies to search, datepicker and others (cannot track new ones).

There are two keys to understanding why automatic backup works consistently across 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 it identically <input type="text"/> ( if only "foo" not a recognized input type or "bar" is a recognized attribute of an input element).

since type="search" not known by IE7, it goes back to type="text" , and you cannot select it in CSS as type="search" , since now type="text"

to solve the problem with the selector, you can try using selectivizr , which uses the capabilities of the JS libraries to select a cross-browser selector (even in non-mainstream browsers using some kind of pseudo-selector matching script). I do not know if they collect elements created in shiv.

or better, use the usual way to create a search query in HTML / JS as a backup,

for an easy answer, I would do what the other guy commented on. Just create a class called "search" and apply this class name to all search boxes. create them the same way as the one you used the selector with, just like:

 input[type="search"],input.search{ /*styles*/ } <input type="search" class="search" />
+3
source

Source: https://habr.com/ru/post/1400698/

More articles:


All Articles