無効な要素のCSSセレクタ

私はAngularJSを使って画像ボタンを無効/有効に設定しています。
透明になっていることを示す私のCSSセレクターが機能していません。
入力要素に対して無効を選択するtry itから始めましたが、div要素の場合には実際にはCSSが適用されます。
私は、次のコードで、その結果、動作しません、私の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

擬似セレクタのみ入力要素のために動作します。 divのために、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：

:disabled

出典

2017-08-30 06:43:53

私は文字列属性部分を削除しようとしましたが、うまくいかなかった。これをテストしましたか？ – MrFox

は、要素のすべてのタイプで動作する属性セレクタ[attribute='value']を使用し適用するためにdiv[disabled]を使用疑似クラスと比較して唯一のフォーム要素

上で動作し、属性disabledが値を持っていない場合、あなたのケースで、あなたはそれをセレクタに値の一部を使用していない[disabled]

注意を省略することができ、、それは要素の有無を問わずに要素を対象としますが、値部分が使われる最後のCSS規則を見ることができますから、そうではありません。

スタックは、あなたが使用する必要があるdiv要素については（ここでは、私はすべてにそれを使用していますが、もちろんinput年代について: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="[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[disabled="disabled"]またはdiv[disabled]

入力要素ではなく、y適用することができます:disabled

出典

2017-08-30 06:47:16

div [disabled = "disabled"]を使用して無効divを選択することができます。

出典

2017-08-30 06:48:20

無効な要素のCSSセレクタ

答えて

関連する問題