CSS selector for disabled elements

Question

I'm working with AngularJS to set image buttons disabled/enabled.
My css selector to show them transparent isn't working.
I've started with a try it that selects a disable on an input element and there it does indeed apply the css, but not in case of my div elements.
I've added my div elements that don't work, resulting in the following code:

<!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>

The disabled is getting added/removed for my AngularJS html elements. So how do I get the css to apply to a div with disabled added to it?

Note: I know it's possible to duplicate the elements, use ng-if to show/hide them and apply the transparency to it with a class, but that's very ugly.

but I don't get why you need `disabled` attribute for `div`s - its for form elements... — kukkuz, Aug 30 '17 at 06:55

score 22 · Accepted Answer · answered Aug 30 '17 at 06:44

:disabled pseudo selector will work only for input elements. For div, use div[disabled] to apply css

Use

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

Demo

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>

score 7 · Answer 2 · answered Nov 14 '19 at 09:48

7

Select all disabled input elements (such as input, textarea, select, option, radio, checkbox, button) :

*:disabled{
    //enter code here
}

Select all other disabled elements (such as div, section, p, etc):

*[disabled]{
    //enter code here
}

answered Nov 14 '19 at 09:48

daniellalasa

503
5
14

Asons · Answer 3 · 2017-08-30T07:11:34.923

Use the attribute selector [attribute='value'], which will work on all types of elements, compared to the pseudo-class :disabled, which only works on form elements

And in your case, where the attribute disabled doesn't have a value, you can omit it [disabled]

Note, when not using the value part in the selector, it will target elements both with and without, but as you can see the with last CSS rule, where the value part is used, it won't.

Stack snippet (here I used it on all, but you can of course keep :disabled for the input's)

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>

score 2 · Answer 4 · answered Aug 30 '17 at 06:47

2

For a div element you should use div[disabled="disabled"] or div[disabled]

its not an input element where you can apply :disabled

answered Aug 30 '17 at 06:47

Awsme Sandy

1,398
7
20

score 2 · Answer 5 · answered Aug 30 '17 at 06:48

2

You can use div[disabled="disabled"] to select disabled div.

answered Aug 30 '17 at 06:48

Ateet Shekhar

189
2
11

Maulik · Answer 6 · 2017-08-30T06:51:03.970

1

See Below Example :

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

And aslo See this :

edited Aug 30 '17 at 06:51

answered Aug 30 '17 at 06:43

Maulik

765
3
14

I tried removing the string attribute part, it didn't work. Did you test this out? – MrFox Aug 30 '17 at 06:53

score 0 · Answer 7 · answered Jan 29 '22 at 18:56

0

I would try:

*:disabled, *[disabled]{ /* ... */}

Example

*:disabled,
*[disabled] {
  background: #000;
}

<input type="text" value="foo" disabled />
<input type="text" value="bar" />

answered Jan 29 '22 at 18:56

Sarout

821
4
25

CSS selector for disabled elements

7 Answers7

Linked