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:
input:disabled {
background:#dddddd;
}
input:disabled+label{color:#ccc;}
<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
<br>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>
The styling works for the checkbox label, but not the text label. Are checkboxes the only input types that let you style their labels via css?
I testing with Firefox.
input:disabled+label
means that the label is immediately AFTER the input. In your HTML, the label comes BEFORE the text input. (but there's no CSS for "before".)"disabled"
class to thelabel
elements. It shouldn't be any difficult since having disabled elements already imply you are using some sort of programming with the forms.