< input type ="？>的CSS选择器 [英] CSS Selector for <input type="?"

问题描述

有什么方法与CSS的目标所有输入，基于他们的类型？我有一个禁用类，我使用各种禁用表单元素，我设置文本框的背景颜色，但我不希望我的复选框来获得那种颜色。

我知道我可以使用单独的类，但我宁愿使用CSS如果可能。我相信，我可以在javascript中设置这个，但再次寻找CSS。

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

编辑

CSS3我可以做一些像

INPUT [type ='text']：disabled

$ b 谢谢你的帮助！所以这里有一个选择器，修改所有的文本框和区域，已禁用，而不需要设置任何类，当我开始这个问题，我从来没有想到这是可能的...

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


• 前面是〜元素，它是： 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屋！