Disabled label associated with checkbox using css selector

Question

I want to disable the label associated with checkbox. The code snippets are below:

code:

<label for="label1" class="form-checkbox-left"><input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>Name 1</label>

css :

.form-checkbox-left input[type=checkbox]:disabled {
    color:#ccc;
}

Somehow it is not working.

Answer 1

You can opt to use the element+element Selector. You need to place the input before the label, however

input[type=checkbox]:disabled+label {
  color: #ccc;
}

<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>
<label for="label1" class="form-checkbox-left">Name 1</label>

Answer 2

I have just double-checked with Firefox, and adding any sort of a style definition to a checkbox doesn't change any aspect of its appearance. It seems that you are out of luck here and would have to take a different approach by hiding the checkbox itself (not with display: none;, but with visibility: hidden; instead) and then add auxiliary CSS to actually customize its appearance.

An example on how to do this can be found on http://cssdeck.com/labs/css-checkbox-styles
Maybe that helps you derive a method that suits you best.

EDIT

If you are attempting to style the parent label of the checkbox, you are out of luck, because parent element selectors are not implemented in CSS so far, although a proposal has been made (see https://shauninman.com/archive/2008/05/05/css_qualified_selectors for details).

EDIT 2

You could try this by moving the label definition behind the checkbox definition:

<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled><label for="label1" class="form-checkbox-left">Name 1</label>

Then your CSS should look like this to facilitate the change:

input[type="checkbox"][disabled] + label {
  color: #ccc;
  }

This in turn modifies the text of your label.