How to style a HTML label for disabled input

Question

I would like the labels for my form elements to be greyed out if the input is disabled and am not able to get it to work for text inputs. I have tried the following:

<

Answer 1

This selector input:disabled+label{color:#ccc;} targets label elements that are placed after an input element that is disabled

In this snippet the label is after a disabled input, so the label element is gray

Check

In this case, the label is before the input so the selector does not apply to it

Text

Possible solution would be to wrap your elements in an extra div and apply a class name to the div, something like this

    
    Check


    Text
    

And then you can write your css like this

.disabled label {
    color: #ccc;
}