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

You can also use floats and always put the label after the input Demo

You will have to wrap it in a span (or any other element really).

HTML :

    
    Check




    
    Text

CSS :

span {
    display: inline-block;
    overflow: hidden;
}

input {
    float: right;
}

label {
    float: left;
}

input:disabled {
    background:#ffffdffffd;
}

input + label {
    float: none;
}

input:disabled + label {
    color:#ccc;
}