CSS Attribute Selector for Input Type="Button" Not Working on Ie7

Css attribute selector for input type=button not working on IE7

I was struggling getting input[type=button] selectors working in IE7 or IE8. The problem turned out to be that the HTML Pages were missing a "!DOCTYPE" declaration. Once I added

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Then everything worked fine. You can obviously use a different "!DOCTYPE" declaration to suit your requirements.

CSS selector for disabled input type=submit

Does that work in IE6?

No, IE6 does not support attribute selectors at all, cf. CSS Compatibility and Internet Explorer.

You might find How to workaround: IE6 does not support CSS “attribute” selectors worth the read.

EDIT
If you are to ignore IE6, you could do (CSS2.1):

input[type=submit][disabled=disabled],
button[disabled=disabled] {
    ...
}

CSS3 (IE9+):

input[type=submit]:disabled,
button:disabled {
    ...
}

You can substitute [disabled=disabled] (attribute value) with [disabled] (attribute presence).

button selector in ie7 (html5 doctype)

Try to use <button></button> instead of <input type="button" />. You then will be able to use element selector (BUTTON) instead of attribute selector (INPUT[type="button"]).

And, just in case, of course, you cannot select BUTTON elements with INPUT[type="button"] selector, and vice versa.

CSS Selector for input type=?

Yes. IE7+ supports attribute selectors:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.

Other safe (IE7+) selectors are:

Parent > child that has: p > span { font-weight: bold; }
Preceded by ~ element which is: span ~ span { color: blue; }

Which for <p><span/><span/></p> would effectively give you:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Further reading:
Browser CSS compatibility on quirksmode.com

I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.

CSS selector for text input fields?

input[type=text]

or, to restrict to text inputs inside forms

form input[type=text]

or, to restrict further to a certain form, assuming it has id myForm

#myForm input[type=text]

Notice: This is not supported by IE6, so if you want to develop for IE6 either use IE7.js (as Yi Jiang suggested) or start adding classes to all your text inputs.

Reference: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Because it is specified that default attribute values may not always be selectable with attribute selectors, one could try to cover other cases of markup for which text inputs are rendered:

input:not([type]), /* type attribute not present in markup */
input[type=""],    /* type attribute present, but empty    */
input[type=text]   /* type is explicitly defined as 'text' */

Still this leaves the case when the type is defined, but has an invalid value and that still falls back to type="text". To cover that we could use select all inputs that are not one of the other known types

input:not([type=button]):not([type=password]):not([type=submit])...

But this selector would be quite ridiculous and also the list of possible types is growing with new features being added to HTML.

Notice: the :not pseudo-class is only supported starting with IE9.

input[checked] CSS selector on radio input is not matching in IE7

This is weird. IE7 supports attribute selectors (at least basic ones). It must be something specific to the checked attribute. If you change the checked attribute to ANY other attribute name (valid or not) the selector works. Just try deleting the 'ed' to make it 'check' and both the existence and the equality selector work. Not sure if this has to do with IE7 not setting the defaultChecked DOM (not HTML) attribute when the document is parsed.

Internet Explorer 8 and later. In IE8 mode, parsing operations on the
checked content attribute always affect both the checked content
attribute and defaultChecked DOM attribute. For example,
removeAttribute('checked') sets both checked and defaultChecked to
false. Similarly, setAttribute('checked', 'checked') sets both DOM
attributes to true (as if the element was being re-parsed).

from: https://msdn.microsoft.com/en-us/library/ie/ms533715(v=vs.85).aspx

If you have a large need (many elements) you could try Selectivizr - conditionally loaded for IE6-IE8 (what Selectivizr supports):

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="libs/selectivizr.js"></script>
<![endif]-->

If you only have one or two places you could use a jQuery (or plain JavaScript) event handler. This is not how I would normally write this, but my usually methods don't work in IE7; this was the only one that worked in IE7:

$('input[name="x"]').on('change', function(){
    $('input[name="x"]').siblings('span').removeClass('red');
    $(this).next('span').addClass('red');
});

CSS:

.red{
    color:red;
}

css selector to match an element without attribute x

:not selector:

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}

Support: in Internet Explorer 9 and higher

CSS Attribute Selector for Input Type="Button" Not Working on Ie7