禁用元素的CSS选择器

我正在使用AngularJS来设置禁用/启用的图像按钮。
我的CSS选择器显示他们透明不起作用。
我已经开始使用try it，它在输入元素上选择一个禁用对象，并且它确实应用了css，但不适用于我的div元素。
我补充说，不工作我的div元素，导致下面的代码：禁用元素的CSS选择器

<!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="[email protected]" name="usremail"> 
</form> 
<div disabled="disabled">should be transparent</div> 
</body> 
</html>

残疾人是越来越添加/我AngularJS html元素删除。那么如何让CSS应用到添加了禁用功能的div？

注意：我知道可以复制这些元素，使用ng-if来显示/隐藏它们，并将它应用到一个类的透明度，但这非常难看。

来源

2017-08-30 MrFox

但我不明白为什么你需要'div's的'disabled'属性 - 它对于表单元素... – kukkuz

:disabled伪选择器将只能用于输入元件。对于格，使用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="[email protected]" name="usremail"> 
 
</form> 
 
<div disabled="disabled">should be transparent</div>

来源

2017-08-30 06:44:23

参见下文实施例：

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="[email protected]" name="usremail"> 
 
</form> 
 
<input disabled/>should be transparent

而ASLO参见此：

来源

2017-08-30 06:43:53

我尝试删除字符串属性部分，它没有工作。你测试过了吗？ – MrFox

使用属性选择[attribute='value']，这将在所有类型的元素工作，与伪类相比，这仅适用于表单元素

而在你的情况下，在属性disabled没有一个值，你可以省略[disabled]

注意，当选择不使用值的一部分，它会针对有和没有的元素，但正如您可以看到使用最后一个CSS规则一样，值部分在哪里使用，它不会。

栈片断（这里我用它所有，但当然你可以保持:disabled为input的）

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="[email protected]" 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>

来源

2017-08-30 06:44:46 LGSon

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

其不是输入元素其中y您可以申请:disabled

来源

2017-08-30 06:47:16

您可以使用div [disabled =“disabled”]选择禁用的div。

来源

2017-08-30 06:48:20

禁用元素的CSS选择器

回答

相关问题