Как поменять стиль чекбокса при наведении на лейбл, когда чекбокс не активный?

Question

[Torento20345]

Как поменять стиль чекбокса при наведении на родителя лейбл, когда чекбокс не чекед?
Хочу при наведении на него сделать полупрозрачную галочку
https://jsfiddle.net/460t7jae/2/

Answer 1

[iBird Rose]

переделать чекбокс на свой. гугли "custom checkbox css" к примеру: https://codepen.io/Vestride/pen/dABHx

Comments

[Torento20345]

Так я загуглил, выдало этот пример с нот чекед, но он не очень работает
Не могу найти в чём ошибка

label input:not(:checked) + label:hover {
  background-color:red;
}

Т.е. даже этот простой пример не сработал, а как мне нужно продолжить цепочку, чтобы там был ещё +, где стиль я уже самому инпуту присвоил

Answer 2

[Ennison]

https://jsfiddle.net/4a3zq20j/39/
html

<label class="checkbox">
<input class="checkbox__input" type="checkbox">
<div class="checkbox__item">
 <div class="checkbox__arrow"></div>
</div>
<div class="checkbox__text"> Some text</div>

css

.checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox__input {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.checkbox__text  {
  padding-left: 8px;
}

.checkbox__item {
  background-color: #fff;
  border: 2px solid gray;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.checkbox__item {
  position: relative;
}

.checkbox__arrow {
  display: none;
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 11px;
  border-right: 2px solid gray;
  border-bottom: 2px solid gray;    
  transform: rotate(43deg);
}

.checkbox__input:checked + .checkbox__item .checkbox__arrow{
    display: block;
} 
 
/*тут  2 состояния ховера на лейбле, когда чекнутый и не чекнутый инпут*/

.checkbox:hover .checkbox__item {
  background-color: #bdf7d1;
}

.checkbox:hover .checkbox__input:checked + .checkbox__item {
  background-color: #eeaeef;
}