CSS 3 input text styling

[clarkekent]

How can I style the input box (input type="text") and not affect other input types like radio box, checkbox, button.

I tried this css:

input {
...
...
...

}

but this css affects all input components including the radio boxm checkbox, button, etc... I only want to customize the input text.

[jscheuer1]

Use a class selector:

.tbox {
color:red;
background-color:lightblue;
}

Then assign the class name to the element(s) in the markup:

<input type="text" class="tbox">

Now, since css2, this type of syntax is supposed to work:

input[type="text"] {
color:red;
}

However, IE does not support it. Opera and FF do.

[clarkekent]

I cannot use a class selector so the .tbox you suggested will not work for me.

Now, is there any other way besides the input[type="text"] selector. I tried that also, and indeed it does not work on IE6. I was thinking maybe there are other ways to go around this one, besides using a class selector

regards,

Anton

[jscheuer1]

Well, if they all have id's, you could collect the id's as a single selector. If there is something intrinsic about their parent elements that is different from the other form input elements' parent elements, you could use that (like if they are all in div elements and the other inputs are not).

I'm a little curious as to why you cannot use class. Sounds like you have little or no control over the content. Is this like a cafe-express site, or some other template oriented site?

A script could be used but, it would have no effect in non-javascript enabled browsers. If your content is already highly dependent upon javascript (a bad idea to begin with) there would be little harm in using a script. Also, even if the page is not dependent upon script, just adding like a little color or something like that with script would be fine as long as the content was still legible without it.

[sandman]

coudn't you do input.tbox {color: red;}

[jscheuer1]

coudn't you do input.tbox {color: red;}

How is that different than:

Use a class selector:


.tbox {
color:red;
background-color:lightblue;
}

Then assign the class name to the element(s) in the markup:

<input type="text" class="tbox">

in so far as:

I cannot use a class selector so the .tbox you suggested will not work for me.

[clarkekent]

Im using JSF. I haven't figured out the generic style class/selector that the base JSF uses. Thats the restriction, atleast while I haven't figured out the syle classes used for the textfield. So that's why i can't use a class.

[jscheuer1]

I'm not very familiar with JSF but, a quick search implies that it is a way of using Java, not any particular package. In any case, if what you have is a page that was generated using JSF, you should be able to inspect its source, its generated source, and/or walk its DOM tree to find what class names or ids have been assigned to things. Firefox with the developer's extension is the best tool for this job that I know of though, any browser should be able to give you that sort of information using its 'view source' option. Almost all generated pages present to the browser as HTML code that can be seen with the 'view source'. If any classes or ids have been assigned, you will see them in this view.