In a project I am currently working on, I've noticed that disabled items do not appear disabled enough. My initial plan was to easily address this issue with some CSS.
Typically, adjusting the opacity is my go-to solution to achieve the desired effect. I would set anything with the disabled attribute to have a partial opacity.
[disabled] {
opacity:0.3;
}
However, in our codebase, there are multiple nested elements that also have the disabled attribute. It looks something like this:
<div disabled="disabled">
<p disabled="disabled">
<input data-val="true" type="checkbox" value="true" disabled="disabled">
</input>
</p>
</div>
This is a simplified example. Some of these elements are nested even further!
The problem with using the CSS approach I propose is that the opacity gets applied recursively, resulting in an undesired outcome where the elements either become barely visible or too dark based on their nesting depth.
There are various reasons why items may be disabled in the code, leading to extensive nesting of disabled attributes. Removing all the extra attributes would require a significant amount of effort and time, which we currently don't have available. I'm not sure if any advanced CSS pseudo-selectors can handle this situation effectively, but it's worth exploring. Is there a way to only apply the opacity to either the outermost or innermost disabled element? I experimented with [disabled]:last-child (or first-child), but it didn't seem to work as expected.
While CSS is preferred, using JavaScript or jQuery could be considered as alternatives.
Here is a screenshot demonstrating the issue with nested opacities: https://i.sstatic.net/q8uSi.png