How To Style A Html Label For Disabled Input

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:disable

Solution 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 <label> appears after the <input>. 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: #dddddd;
}

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

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

<inputtype="checkbox"disabled="disabled"id="check1"><labelfor="check1">Check</label><br /><inputtype="text"id="text1"disabled="disabled"><labelfor="text1">Text</label><br /><inputtype="checkbox"id="check2"><labelfor="check2">Check</label><br /><inputtype="text"id="text2"><labelfor="text2">Text</label>

Solution 2:

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

<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>

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

<label for='text1'>Text</label>
<input type='text'id='text1' disabled>

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

<div class='disabled'>
    <inputtype='checkbox'disabledid='check1'><labelfor='check1'>Check</label></div><divclass='disabled'><labelfor='text1'>Text</label><inputtype='text'id='text1'disabled></div>

And then you can write your css like this

.disabledlabel {
    color: #ccc;
}

Solution 3:

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 :

<span><inputtype='checkbox'disabledid='check1'><labelfor='check1'>Check</label></span><br><span><inputtype='text1'id='text1'disabled><labelfor='check'>Text</label></span>

CSS :

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

input {
    float: right;
}

label {
    float: left;
}

input:disabled {
    background:#dddddd;
}

input + label {
    float: none;
}

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

Solution 4:

You can use atribute selectors in CSS, example https://jsfiddle.net/8pp6mpp5/1/

Html

<labeldisabled="disabled">Hola Mundo!</label></br><label>Hola Mundo!</label>`

CSS

label[disabled="disabled"]{
    background-color: #AAA;
}

Solution 5:

I had the same issue: make a read-only input EXACTLY like label, I add a set of css styles to the input to get to that goal:

<input readonly class="inputLikeLabel" value="${myBean.property}"></input>

And in CSS:

.inputLikeLabel {
    background-color: #ffffff;
    text-align: center;
    border: none;
    cursor: none;
    pointer-events: none;
}

By the css style, the input has a white background with no border, no mouse cursor and no click event...similar to label by the end !