styles for different input fields

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Eric Osman - 29 Jul 2003 22:19 GMT

Suppose I want one set of styles for text input and another set of
styles for checkbox input.

I start with code like this:

<input type=text>
....
<input type=checkbox>

If possible, I'd like to avoid having to add

class=mumble

to each one

I notice I can use this css:

input {border-style:solid}

but that affects both my text and my checkboxes.

I tried

input.checkbox {border-style:none}

but that did nothing.

Is there a syntax to specify the checkbox styles without having to put
class=something on each one ?

Thanks. ericosman@rcn.com

Reply to this Message

Berislav Lopac - 29 Jul 2003 22:21 GMT

> Is there a syntax to specify the checkbox styles without having to put
> class=something on each one ?

Sure it is: input[type="text"].

Of course, it doesn't work in IE.

Berislav

--
Berislav Lopac
Web developer

Reply to this Message

Jukka K. Korpela - 29 Jul 2003 22:58 GMT

> Sure it is: input[type="text"].

Beware that in addition to being completely unsupported by IE,
the selector does not match an input element that has the type
attribute _defaulted_. It is very common to default it, and quite OK by
all HTML specifications.

You could specify declarations for 'input[type="checkbox"]' and other
types that you actually use, and use the plain selector 'input'
to specify the declarations that should be applied to text input
fields. This requires that the rules for 'input[type="checkbox"]'
override anything set in the rule for 'input' and not meant to apply to
other than text input elements.

Signature

Yucca, http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Jim Dabell - 29 Jul 2003 22:24 GMT

> Suppose I want one set of styles for text input and another set of
> styles for checkbox input.

[snip]

> If possible, I'd like to avoid having to add
>
> class=mumble
>
> to each one

[snip]

> Is there a syntax to specify the checkbox styles without having to put
> class=something on each one ?

Yes there is. They are called attribute selectors:

<URL:http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors>

Example:

input[type=text] {
...
}

Unfortunately, there is a small company called Microsoft out there, who make
a niche browser called Internet Explorer (you may have heard of it). Being
such a small company, they haven't been able to allocate the resources
needed to support this part of the CSS 2 specification, despite having had
over half a decade to do so.

In other words, stick with classes if you want it to work for Internet
Explorer users.

Signature

Jim Dabell

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2003

styles for different input fields