MrF*_*Fox 0 html css css3 angularjs
我正在使用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显示/隐藏它们并使用类将透明度应用于它,但这非常难看.
: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>选择所有禁用的输入元素（例如输入、文本区域、选择、选项、单选、复选框、按钮）：
*:disabled{
//enter code here
}
选择所有其他禁用元素（例如 div、section、p 等）：
*[disabled]{
//enter code here
}