开发者

CSS how to reduce style definition?

开发者 https://www.devze.com 2023-01-04 13:11 出处:网络
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 { ... }

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号