IE9忽略CSS3：not（）选择器

Question

CSS:

input:not([type=submit]):focus,
input:not([type=file]):focus,
textarea:focus {
    background: #f8f8f8;
    -webkit-box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    outline-color:transparent;
    outline-style:none;
}

IE9 is ignoring input:not([type=file]):focus and styles its box-shadow, background and so on on the input file focus.

Any ideas whats wrong?

EDIT:

If its NOT supported: Why is IE9 styling it the like above? If it IS supported: Why is IE9 ignoring :not() ? and styling it like above?

Answer 1

IE9 certainly supports the :not selector - caniuse (as mentioned in comments)

However...

Your CSS is not doing what you think.

In your current code the second rule:

input:not([type=file]):focus

overrides the first rule. So the properties will be applied to all input elements except file - but including submit - and in ALL browsers (not only IE9)

Instead you should chain the selectors like this:

input:not([type=submit]):not([type=file]):focus, 
textarea:focus {
    background: #f8f8f8;
    -webkit-box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    box-shadow: 0 0 5px 0 rgba(67,67,67,0.3);
    outline-color:transparent;
    outline-style:none;
    color: pink;
}

Checkout this FIDDLE :

...You can see that the input of types submit and file won't get the styles applied on focus, however the input of type button will get the styles applied on focus.

I tested it in IE9 and it works fine.