How can I target text input fields with CSS?

Question

Say you have the following HTML:

<input />
<br />
<input type=text />

Of course, in my HTML I'll have other type of input fields as well (checkboxes, etc). Now I want to style the text inputs only.

What I find when searching, is to do the following in CSS:

input[type=text] { background: red; }

For the second input, where the attribute is explicitly present, this works. For the first however, it works in IE8, but not in IE10. Also not in Chrome.

So how can I target all text input fields, and only the text input field, while not having to put type=text everywhere?

You can see this in a jsFiddle. For IE8, check out these instructions on how to get jsFiddle to work, but it looks like this:

Answer 1

If you want to be able to omit the type="text" and still have the selector match, you will have to use the not psuedoselector available in CSS3:

input[type="text"], input:not([type]) {
    ...
}

http://jsfiddle.net/dByqP/5/

This will not work in lower versions of IE, as CSS3 is not well supported in those browsers.

The best solution would be to go through and add type="text" to your text inputs and just use your original selector.

Answer 2

Style the input using a class and CSS:

.redBG
{
    background: red;
}

Then your HTML is:

<input class="redBG" />

Attached jsFiddle.

Answer 3

My suggestion would be to have the default style for input be

input {
    background-color: red;
}

then overwrite the style for something else if needed, for example a blue button

input[type='button'] {
    background-color: blue;
}

of course you would need to go and specify specific styles for specific input types, but that doesn't mean you wouldn't have done it anyways, if you wanted a unique button for example.

Answer 4

One painful, but sure way could do is to set the style on simply

input {
    /* ... */
}

Which would target the text input in every browser, then you could do what you were doing, and target every single type of input that is not a text input:

input[type=range] {}
input [type=phone] {}
// etc.

This way, even if the :not operator available in CSS3 is not supported by a browser, you can still get it to work...