disabled styling for DIV element

Question

I am trying to style disabled state for div I have code

<div disabled> Welcome </div>
<style>
    div:disabled{
      background-color:#f1f1f1;
    }
</style>

I don't have any class or ID present on the element. It is system generated. I want make the background color light gray.

div doesn't have enabled/disabled semantics. You don't have a div in a disabled state. You just happen to have a div with an attribute called disabled. That's why the :disabled pseudo doesn't work. If you want to add a pretend disabled attribute to your div, use data-disabled or something. — BoltClock, May 10 '17 at 11:42

score 11 · Accepted Answer · answered May 10 '17 at 10:47

11

Try to use the Attribute Selector:

div[disabled]{}

See for more Information:

answered May 10 '17 at 10:47

Wolfgang Blessen

Matt D. Webb · Answer 2 · 2017-05-10T11:07:49.553

4

This can be achieved using attribute selectors, in this case "disabled" is the given attribute:

div[disabled] {
    background-color: #f1f1f1;
}

For more information, here is a very useful reference guide to using data attributes on MDN

Here is the specific guide on Attribute Selectors

Attribute selectors select an element using the presence of a given attribute or attribute value.

edited May 10 '17 at 11:07

answered May 10 '17 at 10:48

Matt D. Webb

score 3 · Answer 3 · answered May 10 '17 at 10:47

3

In the div, disabled is an attribute. So use an attribute selector.

<div disabled> Welcome </div>
<style>
      div[disabled] {
         background-color:#f1f1f1;
      }
</style>

answered May 10 '17 at 10:47

Michael Benjamin

score 2 · Answer 4 · answered May 10 '17 at 10:51

2

css to Attribute

div[disabled]{
     background-color:#f1f1f1;
  }

answered May 10 '17 at 10:51

chirag solanki

4 Answers4