Trying to change color of custom checkbox label when checked, CSS only

Question

I can change the color of the checkbox, but I cannot seem to get the color of the text label to change. I want to do this with CSS. Here is my code.

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.container:hover input~.checkmark {
  background-color: #ccc;
}

.container+label input:checked~.checkmark {
  background-color: #2196F3;
  color: blue;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked~.checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<label class="container">One
      <input type="checkbox" checked="checked">
      <span class="checkmark"></span>
    </label>
<label class="container">Two
      <input type="checkbox">
      <span class="checkmark"></span>
    </label>
<label class="container">Three
      <input type="checkbox">
      <span class="checkmark"></span>
    </label>
<label class="container">Four
      <input type="checkbox">
      <span class="checkmark"></span>
    </label>

I tried adding the label selector with the checkbox like mentioned on many other websites, but it does not work..

I appreciate your help so much, I had spent many hours on this and I would be so relieved to have a solution. Thanks in advance!!

You want the label to change when it is checked, unchecked, or both? — Edward, Mar 19 '18 at 04:13
When it is checked for sure, if it is easy to do it both ways that would be better. — Dave Johnson, Mar 19 '18 at 04:19

score 2 · Accepted Answer · edited Mar 19 '18 at 09:07

Add the following css rule, that should change the color:

label.container {
    color: #7cbb7c;
}

Update

Change the html for the checkboxes like so:

<label class="container">
  <input type="checkbox" checked="checked">
  <span class="label">One</span>
  <span class="checkmark"></span>
</label>

Add the following css rule:

input:checked ~ span.label {
   color: #ff00ff;
}

You can find more about it here: CSS element1~element2 Selector

Example

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.container:hover input~.checkmark {
  background-color: #ccc;
}

.container input:checked~.checkmark {
  background-color: #2196F3;
}

/* Add the following css rule: */
.container input:checked~span.label {
  color: #ff00ff;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked~.checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<label class="container">
  <input type="checkbox" checked="checked">
  <span class="label">One</span>
  <span class="checkmark"></span>
</label>

<label class="container">
  <input type="checkbox">
  <span class="label">Two</span>
  <span class="checkmark"></span>
</label>
<label class="container">
  <input type="checkbox">
  <span class="label">Three</span>
  <span class="checkmark"></span>
</label>
<label class="container">
  <input type="checkbox">
  <span class="label">Four</span>
  <span class="checkmark"></span>
</label>

Thank you but I need to change the color when it is checked only. — Dave Johnson, Mar 19 '18 at 04:20
You can add a class to the the label element when the checkbox is checked using JavaScript and remove it when the checkbox is unchecked. Then instead of label.container you can use label.{yourCheckedCheckboxClass} — hungersoft, Mar 19 '18 at 04:23
I need a CSS solution unfortunately.. I have seen it done on many other websites but nothing is working for me! — Dave Johnson, Mar 19 '18 at 04:27

btzr · Answer 2 · 2018-03-19T05:04:24.210

Next selector `+`

Select elements that is placed immediately after (not inside) the first specified element.

Wrap the label text with a span and move it nex to .checkmark

<label class="container">
      <input type="checkbox" checked>
      <span class="checkmark"></span>
      <span class="label"> text</span>
</label>

Now you can select it like this:

input:checked~.checkmark + .label

Example

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

.container:hover input~.checkmark {
  background-color: #ccc;
}

.container input:checked~.checkmark {
  background-color: #2196F3;
}


/* Add the following css rule: */

.container input:checked~.checkmark+.label {
  color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked~.checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<label class="container">
      <input type="checkbox" checked>
      <span class="checkmark"></span>
      <span class="label"> First</span>
    </label>

<label class="container">
      <input type="checkbox">
      <span class="checkmark"></span>
      <span class="label"> Second</span>
    </label>

<label class="container">
      <input type="checkbox">
      <span class="checkmark"></span>
      <span class="label"> Third</span>
    </label>

CSS has no way to select an element based on it's descendents (nor anything that follows it). You'll need to look to JavaScript to solve this. Alternatively, rearrange your markup. So this is the best/closest possible way to retain your markup. — omukiguy, Mar 19 '18 at 06:16

Trying to change color of custom checkbox label when checked, CSS only

2 Answers2

Example

Next selector +

Example

Next selector `+`