禁用元素的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選擇器

回答

相關問題