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

Community
  • 1
  • 1
Peter
  • 13,733
  • 11
  • 75
  • 122

4 Answers4

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.

jbabey
  • 45,965
  • 12
  • 71
  • 94
  • 1
    Oh, but :not so wouldn't work on Netscape or IE 6 and earlier... :-) – rodrigo-silveira Jul 17 '13 at 12:23
  • @rodrigo-silveira http://lifehacker.com/5925287/dear-web-user-please-upgrade-your-browser :P – jbabey Jul 17 '13 at 12:24
  • 1
    An interesting thread about making css3 selectors work under IE>=7 : http://stackoverflow.com/questions/3077146/use-not-pseudo-class-in-ie7-ie8 – Brewal Jul 17 '13 at 12:29
  • 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. – Peter Jul 17 '13 at 12:39
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...

rodrigo-silveira
  • 12,607
  • 11
  • 69
  • 123
  • 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. – Peter Jul 17 '13 at 12:37
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.

choogoor
  • 15
  • 4
pandavenger
  • 1,017
  • 7
  • 20
  • 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. – Peter Jul 17 '13 at 12:38
  • Yeah jbabey's answer is much better than mine. I really need to keep up to date on my CSS XD – pandavenger Jul 17 '13 at 13:52
0

Style the input using a class and CSS:

.redBG
{
    background: red;
}

Then your HTML is:

<input class="redBG" />

Attached jsFiddle.

Dustin Cook
  • 1,215
  • 5
  • 26
  • 44
  • @Brewal my thinking is there might be more than one style needed... I may have picked it up wrong! – Dustin Cook Jul 17 '13 at 12:32
  • 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 Jul 17 '13 at 12:35
  • @Peter I wasn't sure - but sure it's an alternative that someone else in might need in the future :) – Dustin Cook Jul 17 '13 at 12:36