Change color of span if checkbox is selected

Question

In to-do list apps, if you finish to-do the color of text changes. I'm trying to make that, but there is issue. How can I make this with only pure css?

.todo-item {
  display: flex;
  justify-items: space-between;
  align-items: center;
  gap: 10px;
}

.todo-item div {
  position: relative;
}

.todo-item div input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  z-index: 50;
}

.todo-item div {
  border: 2px black solid;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-item div input[type=checkbox]:checked+div {
  background-color: black;
}

<div class="todo-item">
  <span>If checkbox is selected, color of this text need to be changed to green.</span>
  <div>
    <input type="checkbox">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
      </svg>
    </div>
  </div>
</div>

score 1 · Answer 1 · answered Aug 26 '21 at 00:34

You can place span after input in code and show it before input with flex order. You'll be able to style span text with ~ selector as you already do for fake checkbox

.wrapper {
  display: flex;
  flex-direction: row;
}

.checkbox-styled {
  order: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid black;
}

input {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

input[type=checkbox]:checked + .checkbox-styled {
  background-color: black;
}

input[type=checkbox]:checked ~ span {
  color: green;
}

span {
  margin-right: 10px;
  order: 1;
}

<label class="wrapper">
  <input type="checkbox">
  <div class="checkbox-styled">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
    </svg>
  </div>
  <span>If checkbox is selected, color of this text need to be changed to green.</span>
</label>

score 1 · Accepted Answer · answered Aug 26 '21 at 00:37

The span is on a higher level than the input in the DOM hierarchy, and since there is no CSS parent selector, it is not possible with just CSS.

If you don't want to modify your current HTML structure, here's a JavaScript solution which listens for a change event and checks whether the input is checked, and if so, sets the color style property of the span to green:

const span = document.querySelector('span');
const input = document.querySelector('input[type=checkbox]');
input.addEventListener('change', function() {
  span.style.color = input.checked ? "green" : "black";
})

.todo-item {
  display: flex;
  justify-items: space-between;
  align-items: center;
  gap: 10px;
}

.todo-item div {
  position: relative;
}

.todo-item div input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  z-index: 50;
}

.todo-item div {
  border: 2px black solid;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-item div input[type=checkbox]:checked+div {
  background-color: black;
}

<div class="todo-item">
  <span>If checkbox is selected, color of this text need to be changed to green.</span>
  <div>
    <input type="checkbox">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
      </svg>
    </div>
  </div>
</div>

Change color of span if checkbox is selected

2 Answers2