How to change opacity in disabled state of image in css

Question

I would like to change the opacity of the image only when it is in the off state, as I do for the input buttonbelow:

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

Run codeHide result

But it does not work for images if I add :disabledin css. Please help me with this.

Answer 1

As indicated by W3C :

An element is called virtually disabled if it falls into one of the following categories:

• Button Elements
• input elements that are disabled
• Select items that are disabled.
• disabled textarea elements
• optgroup elements that have a disabled attribute
• Option items that are disabled
• fieldset,

.. , : disabled.

, :disabled . .

input type image.

disabled:

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

<input type="image" 
    src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Example&w=300&h=150&txttrack=0"
    border="0" disabled />

Hide result

, ​​ , onclick="return false;" input.

---

@DevonBernard, , CSS, .

img.disabled
{
    opacity:0.5;
}

<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Example&w=300&h=150&txttrack=0" 
    alt="Image" class="disabled">

Hide result

---

disabled ( ), :

img[disabled]
{
    opacity:0.5;
}

<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Example&w=300&h=150&txttrack=0"
    alt="Image" disabled>

Hide result

, disabled . ( ).

Answer 2

CSS3: (, ..), , img, :

img.disabled
{
    opacity:0.5;
}

, CSS. , , " " , , , , "" .

Answer 3

You can also use the CSS selector for the "disabled" state, which works fine in my case:

button[disabled] > img {
    opacity: 0.5;
}

Best manuel