How can I target text input fields with CSS?

css, html, input

Solution

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.

Problem

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:

Original source

Related problems