< input type ="?>的CSS选择器 [英] CSS Selector for <input type="?"
问题描述
有什么方法与CSS的目标所有输入,基于他们的类型?我有一个禁用类,我使用各种禁用的表单元素,我设置的文本框的背景颜色,但我不想让我的复选框得到那种颜色。
我知道我可以用单独的类来做到这一点,但如果可能的话我宁愿使用CSS。我相信,我可以在javascript中设置这个,但再次寻找CSS。
我的目标是IE7 +。所以我不认为我可以使用CSS3。
编辑
CSS3我可以做一些像
INPUT [type ='text']:disabled
谢谢你的帮助!所以这里有一个选择器,修改所有的文本框和区域已被禁用,而不需要设置任何类,当我开始这个问题,我从来没有想到这是可能的...
INPUT [disabled] [type ='text'],TEXTAREA [disabled]
{
background-color:Silver;
}
这适用于IE7
是的。 IE7 +支援属性选择器:
input [type = radio]
input [type ^ = ra]
输入[type * = d]
输入[type $ = io]
其他安全(IE7 +)选择器包括:
- 父级>子级:
p> span {font-weight:bold; }
- 前面加上〜element,即:
span〜span {color:blue; }
适用于< p>< span /> ; span />< / p>
将有效地提供给您:
< p&
< span style =font-weight:bold;>
< span style =font-weight:bold; color:blue;>
< / p>
进一步阅读:
浏览器在quirksmode.com上的CSS兼容性
我很惊讶,其他人都认为它可以不行。 CSS属性选择器已经在这里了一段时间。我想这是我们清理我们的.css文件。
Is there any way with CSS to target all inputs based on their type? I have a disabled class I use on various disabled form elements, and I'm setting the background color for text boxes, but I don't want my checkboxes to get that color.
I know I can do this with seperate classes but I'd rather use CSS if possible. I'm sure, I can set this in javascript but again looking for CSS.
I'm targeting IE7+. So i don't think I can use CSS3.
Edit
With CSS3 I would be able to do something like?
INPUT[type='text']:disabled
that would be even better get rid of my class altogether...
Edit
Ok thanks for the help! So here's a selector which modifies all textboxes and areas which have been disabled without requiring setting any classes, when I started this question I never thought this was possible...
INPUT[disabled][type='text'], TEXTAREA[disabled]
{
background-color: Silver;
}
This works in IE7
Yes. IE7+ supports attribute selectors:
input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]
Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.
Other safe (IE7+) selectors are:
- Parent > child that has:
p > span { font-weight: bold; }
- Preceded by ~ element which is:
span ~ span { color: blue; }
Which for <p><span/><span/></p>
would effectively give you:
<p>
<span style="font-weight: bold;">
<span style="font-weight: bold; color: blue;">
</p>
Further reading: Browser CSS compatibility on quirksmode.com
I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.
这篇关于< input type ="?>的CSS选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!