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

Based on the comment made by @andi:

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".)

He's absolutely right. But that shouldn't stop us being able to solve the problem with a little trickery!

First step: swap the HTML elements order so that the appears after the . This will allow the styling rules to work as desired.

Then for the fun bit: use CSS to position the labels for text inputs on the left hand side!

input:disabled {
  background: #ffffdffffd;
}

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

input[type=text]+label {
  float: left;
}

Check



Text



Check



Text