CODEWITHSUNDEEP
htmlcss
Arshad Rehmani
Arshad Rehmani

Reputation: 2185

apply css class to "button" inside div

I have a div containing a button as below,

<div id="parentDiv">
    <button id="myBtn" class="myclass">ADD ME</button>
</div>

a new attribute gets added to this button from JS and it becomes like below ('disabled' attribute is added)

<div id="parentDiv">
    <button id="myBtn" class="myclass" disabled="disabled">ADD ME</button>
</div>

I'm trying to apply below CSS class for disabled button,

#parentDiv button.disabled {
    color: #AAAAAA;
}

But to my surprise this class is not getting applied to button. Please point me the correct direction.

Upvotes: 11

Views: 68496

Answers (5)

Pankaj
Pankaj

Reputation: 54

#parentDiv button[disabled]
{
    color:red;
}

Upvotes: -1

pavel
pavel

Reputation: 27092

Use attribute selector [attr] 

#parentDiv button[disabled] {color: #aaa}

http://jsfiddle.net/f10vfagq/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115362

You need to add the attribute selector

#parentDiv button[disabled="disabled"] 
{
    color:red;
}

or just 

#parentDiv button[disabled] 
{
    color:red;
}


#parentDiv button[disabled="disabled"] {
  color: red;
}
<div id="parentDiv">
  <button id="myBtn" class="myclass" disabled="disabled">ADD ME</button>
</div>

Upvotes: 20

stanze
stanze

Reputation: 2480

Replace your styles with this

#parentDiv button:disabled
{
    color:#F00;
}

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can use CSS3 selector :disabled 

#parentDiv button:disabled
{
    color:#AAAAAA;
}

DEMO HERE

Upvotes: 3

Related Questions