CSS how to reduce style definition?
I have a css style definition like the following:
input[type=email], input[type=tel], input[type=url], input[type=text],开发者_JAVA百科 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]
.
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
;
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.
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.
精彩评论