Стилизация checkbox при активации

Question

.checkbox__input {
  appearance: none;
  position: absolute;
  margin-right: 5px;
}

.checkbox__label {
  position: relative;
  padding-left: 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #181818;
}

.checkbox__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  z-index: 1;
  border: 1px solid #666;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  background-color: #fff;
}

.checkbox__label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  z-index: 2;
  display: block;
  width: 16px;
  height: 16px;
  background: url("../../img/check.svg") no-repeat;
}

.checkbox__input:checked + .checkbox__label::before {
  border: 1px solid #57a216 !important;
  background-color: #57a216 !important;
}

<label class="checkbox__label">
    <input class="checkbox__input checkbox__input--another" type="checkbox">
    Другое
</label>

По задумке когда поставлена "Галочка", background меняется с белого на зелёный. Но этого не происходит :( Думаю что ошибка очевидная, но никак не могу найти где. Заранее благодарю

Answer 1

.checkbox__input {
  appearance: none;
  position: absolute;
  margin-right: 5px;
}

.checkbox__label {
  position: relative;
  padding-left: 24px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #181818;
}

.checkbox__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  z-index: 1;
  border: 1px solid #666;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  background-color: #fff;
}

.checkbox__label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  z-index: 2;
  display: block;
  width: 16px;
  height: 16px;
  background: url("../../img/check.svg") no-repeat;
}

.checkbox__input:checked + .checkbox__label::before {
  border: 1px solid #57a216 !important;
  background-color: #57a216 !important;
}

<input id="custom-checkbox" class="checkbox__input checkbox__input--another" type="checkbox">
<label for="custom-checkbox" class="checkbox__label">
    Другое
</label>

Element+element (div+p) Выбирает первый элемент <p>, который помещается сразу после элементов <div>

БЛОГ НА HUSL

Стилизация checkbox при активации

Ответы (1 шт):