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

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
– Edward, Commented Mar 19, 2018 at 4:13
When it is checked for sure, if it is easy to do it both ways that would be better. — Dave Johnson
– Dave Johnson, Commented Mar 19, 2018 at 4:19

btzr · Accepted Answer · 2018-03-19 09:07:19Z

2

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>

edited Mar 19, 2018 at 9:07

btzr

2,15421 silver badges26 bronze badges

answered Mar 19, 2018 at 4:14

hungersoft

5314 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dave Johnson Over a year ago

Thank you but I need to change the color when it is checked only.

hungersoft Over a year ago

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}

Dave Johnson Over a year ago

I need a CSS solution unfortunately.. I have seen it done on many other websites but nothing is working for me!

btzr · Accepted Answer · 2018-03-19 05:04:24Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Example

3 Comments

Next selector `+`

Example

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example

3 Comments

Next selector +

Example

1 Comment

Linked

Related

Next selector `+`