<输入类型=“?"的CSS选择器 [英] CSS Selector for &lt;input type=&quot;?&quot;

问题描述

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.

我知道我可以使用单独的类来做到这一点，但如果可能的话，我宁愿使用 CSS.我确定，我可以在 javascript 中设置它，但要再次寻找 CSS.

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.

我的目标是 IE7+.所以我不认为我可以使用 CSS3.

I'm targeting IE7+. So i don't think I can use CSS3.

编辑

使用 CSS3 我可以做类似的事情吗?

With CSS3 I would be able to do something like?

INPUT[type='text']:disabled 那会更好地完全摆脱我的班级...

INPUT[type='text']:disabled that would be even better get rid of my class altogether...

编辑

好的，感谢您的帮助！所以这是一个选择器，它可以修改所有已禁用的文本框和区域，而无需设置任何类，当我开始这个问题时，我从未想过这是可能的......

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;
}

这在 IE7 中有效

推荐答案

是的.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.

其他安全 (IE7+) 选择器有:

Other safe (IE7+) selectors are:

• Parent > child 具有:p >跨度{字体粗细:粗体；}
• 前面有~元素，即: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 文件了.

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.

这篇关于<输入类型=“?"的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！