How to change opacity in disabled state of image in css

Question

I would like to change opacity of image only when it is in disabled state like i'm doing for input button below:

input[type="button"]:disabled {
  border: 1px solid #AAA;
  border-radius: 4px;
  opacity:0.5;
}

img:disabled {
  opacity:0.5;
}

Normal button: <input type="button" value="Close" /><br>
Disabled button: <input type="button" value="Cancel" disabled="true"/>
<br><br>
Normal: <img src="http://i.stack.imgur.com/AkfB4.png" /><br>
Disabled: <img src="http://i.stack.imgur.com/AkfB4.png" style="opacity:0.5" disbled />

But it's not working for images, if I add :disabled in css. Please help me to get this.

Answer 1

As stated by W3C:

An element is said to be actually disabled if it falls into one of the following categories:

• button elements that are disabled
• input elements that are disabled
• select elements that are disabled
• textarea elements that are disabled
• optgroup elements that have a disabled attribute
• option elements that are disabled
• fieldset elements that have a disabled attribute

Note: This definition is used to determine what elements can be focused and which elements match the :disabled pseudo-class.

So, you should not use :disabled for images. You should to find some other way.

The best possibility should be to use an input tag with the type attribute image.

This way to can make use of the disabled attribute:

input[type=image]:disabled
{
    opacity:0.5;
}

<input type="image" 
    src="http://i.stack.imgur.com/AkfB4.png"
    border="0" disabled />

If you don't want the a form to submit when you click it, you should add onclick="return false;" to the input tag.

---

Another possibility as mentioned by @DevonBernard is to add a class disabled, and use CSS to get the opacity right.

img.disabled
{
    opacity:0.5;
}

<img src="http://i.stack.imgur.com/AkfB4.png" 
    alt="Image" class="disabled">

---

If you do want to use the disabled attribute (even though you shouldn't) , another possibility is to use the attribute selector by using:

img[disabled]
{
    opacity:0.5;
}

<img src="http://i.stack.imgur.com/AkfB4.png"
    alt="Image" disabled>

This is not the correct way, since the disabled attribute should not be used on images in the first place. Also some browsers might not support this (now or in the future).

Answer 2

CSS3 :disabled selector is usually used on form elements (checkboxes, buttons, etc), so if you want to apply opacity on img, you should use:

img.disabled
{
    opacity:0.5;
}

So it is about the CSS class. I don't think I have an idea what could "disable state" on image mean actually, perhaps only an image state after you clicked it, but even in that case you can't go with "disabled" selector.