logo标签列表

禁用元素的CSS选择器

htmlangularjscss
6

我正在使用AngularJS设置图片按钮的禁用/启用状态。
我的CSS选择器用于将它们显示为透明并不能正常工作。
我从试验页面开始，这个页面可以选择一个输入元素并使其处于禁用状态，CSS确实能够应用到该元素上，但是对于我的div元素却不行。
我添加了不起作用的div元素，代码如下：

<!DOCTYPE html>
<html>
<head>
<style> 
input:enabled {
    background: #ffff00;
}

input:disabled {
    background: #dddddd;
}
div:disabled {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>

<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john@doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>
</body>
</html>

我的AngularJS HTML元素正在添加/删除禁用状态。那么，我如何使CSS应用于具有已添加禁用状态的div？
注意：我知道可以复制元素，使用ng-if来显示/隐藏它们，并使用类将透明度应用于它们，但那样很丑陋。
但我不明白为什么你需要在div中使用disabled属性 - 这是针对表单元素的... - kukkuz
7个回答
22
:disabled 伪类选择器仅适用于输入元素。对于 div 元素，请使用 div[disabled] 应用 CSS 样式。
使用：
div[disabled] {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

演示

input:enabled {
    background: #ffff00;
}

input:disabled {
    background: #dddddd;
}
div[disabled] {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john@doe.com" name="usremail">
</form>
<div disabled="disabled">should be transparent</div>

7
选择所有禁用的输入元素（例如 input、textarea、select、option、radio、checkbox、button）：
*:disabled{
    //enter code here
}

选择所有其他禁用的元素（例如div、section、p等）：
*[disabled]{
    //enter code here
}
4
使用属性选择器[attribute='value']，它适用于所有类型的元素，相比伪类:disabled仅适用于表单元素。 在您的情况下，如果属性disabled没有值，您可以省略值部分[disabled]。 注意，当不使用选择器中的值部分时，它将同时针对有和没有该属性的元素进行目标选择，但是正如您在最后一个CSS规则中所看到的那样，在值部分被使用的情况下，它将不会这样做。 堆栈片段（在此我对所有元素都使用了它，但您当然可以为保留:disabled）。 

input:not([disabled]) {
  background: #ffff00;
}

input[disabled] {
  background: #dddddd;
}

div[disabled] {
  opacity: 0.4;
  filter: alpha(opacity=40);      /* For IE8 and earlier */
}

div[disabled='disabled'] {
  color: red;
}
<form action="">
  First name: <input type="text" value="Mickey"><br>
  Last name: <input type="text" value="Mouse"><br>
  Country: <input type="text" value="Disneyland" disabled><br>
  Password: <input type="password" name="password" value="psw" disabled><br>
  E-mail: <input type="email" value="john@doe.com" name="usremail">
</form>

<div disabled>
  should be transparent, but doesn't have red colored text
</div>

<div disabled='disabled'>
  this will both be transparent and have red colored text
</div>

2

对于一个div元素，您应该使用div[disabled="disabled"]或div[disabled]

它不是一个可以应用:disabled的输入元素

2
您可以使用 div[disabled="disabled"] 来选择禁用的 div。
1
请看下面的例子： 

input:enabled {
    background: #ffff00;
}

input:disabled {
    background: #dddddd;
}
div:disabled {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" value="Disneyland" disabled><br>
Password: <input type="password" name="password" value="psw" disabled><br>
E-mail: <input type="email" value="john@doe.com" name="usremail">
</form>
<input disabled/>should be transparent

同时请看这个：

enter image description here

我尝试删除字符串属性部分，但没有起作用。你测试过这个吗？ - MrFox
0
我会尝试：
*:disabled, *[disabled]{ /* ... */}

例子

*:disabled,
*[disabled] {
  background: #000;
}
<input type="text" value="foo" disabled />
<input type="text" value="bar" />

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接