11

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:

enter image description here

Improve this question

4 Answers 4

Reset to default
16

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Oh, but :not so wouldn't work on Netscape or IE 6 and earlier... :-)
@rodrigo-silveira lifehacker.com/5925287/… :P
An interesting thread about making css3 selectors work under IE>=7 : stackoverflow.com/questions/3077146/…
Great, didn't know/remember the not. This allows me to specify a style for the text input elements only, and not have to make exceptions for all other input elements.
1

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...

Improve this answer

1 Comment

This would work but is sort of the opposite approach. In my case, I think it would require quite a lot of work, because for every type of input, I'd have to make exceptions. Whilst all I want to do is style the text input elements.
1

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.

Improve this answer

2 Comments

As you mention, it would be a lot of work. Whereas I want to style just the input text elements, here I'd have to make exceptions for all the other element types.
Yeah jbabey's answer is much better than mine. I really need to keep up to date on my CSS XD
0

Style the input using a class and CSS:

.redBG
{
    background: red;
}

Then your HTML is:

<input class="redBG" />

Attached jsFiddle.

Improve this answer

3 Comments

@Brewal my thinking is there might be more than one style needed... I may have picked it up wrong!
The downside of this approach is that, if you want a certain look across your entire site, you have to add the class to all the input elements. So for my scenario, it's not very suitable.
@Peter I wasn't sure - but sure it's an alternative that someone else in might need in the future :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.