views:

42

answers:

3

I have a css style definition like the following:

input[type=email], input[type=tel], input[type=url], input[type=text], input[type=password], input[type=file], textarea { ... }

can that be reduced to something shorter?

Note: I don't want to style to apply to e.g. input[type=checkbox], input[type=radio] or input[type=image].

A: 

You can give all of the fields the same class, so they can be styled the same way:

html:

<input class="inputClass" type="tel" /> <input class="inputClass" type="url" />

css:

.inputClass { ... }

If for some reason you cannot, and you must do without classes, then what you have is the only way to do it.

Luke Burns
@jim as great as attribute selectors are, keep in mind that suport is still a bit wonky in IE, so you may be falling back to classes anyways, making @luke's answer quite appropriate.
DA
Precisely IE<=5 (Mac) and IE<=6 (Win) don't support attribute selectors.
melhosseiny
@melhosseiny - IE doesn't seem to understand special types (e.g. email, tel or url) either.
Gert G
But that's okay, as HTML5 is still a draft.
melhosseiny
@melhosseiny - Yeah, that just hit me as well.
Gert G
+1  A: 

You should make a general declaration, then handle the exceptions.

input {
    p: v1;
}

input[type=checkbox], input[type=radio], input[type=image] {
    p: v2;
}

where v2 cancels v1;

melhosseiny
It all depends on how many excluded types he has.
Gert G
Oh yeah, i didn't notice the HTML5 attribute values. For HTML4.01, only 4 would have been left.
melhosseiny
A: 

If you know that these types will only show up in input elements, then you can do this:

*[type="email"],
*[type="tel"],
*[type="url"],
*[type="text"],
*[type="password"],
*[type="file"],
textarea {
  border: 1px solid red;
}

Firefox 3.6.6, Iron 5.0.380 and Opera 10.60 had no problems, but IE is oblivious. This applies to the selectors used in the question as well. The only answer that provides a cross browser solution is Luke Burns' answer.

Gert G