Wie kann man ein Label Element mit inaktiven (disabled) Input stylen?

3 Jan. 2020HTMLCSS

Ich habe ein HTML Label und Input, wobei das Input disabled ist. Was wäre die einfachste Möglichkeit das Label-Element entsprechend zu stylen?

<input id="checkbox-123" type="checkbox"  ...  disabled/>
<label for="checkbox-123">Hallo</label>
Noch keine Stimmen abgegeben
Noch keine Kommentare
  • 20 Jan. 2020

    Am einfachsten ginge es mit dem "+" Plus-Selektor ("Adjacent selector" https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors):

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

    Und speziell mit dem #id-Selektor:

    #checkbox-123:disabled + label {
    color:#ccc;
}

    Beispiel: https://jsfiddle.net/jkz6Lsq2/

    Noch keine Stimmen abgegeben
    Noch keine Kommentare