Стилизация checkbox?

Question

Как правильно стилизовать checkbox с такой структурой html, что-бы при клике появлялся синий квадрат в checkbox? Спасибо

.mfilter-col-input {
  position: relative;
  top: 3px;
   width: 20px;
  height: 20px;
}

.mfilter-col-input input {
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  margin: 0px;
  z-index: -1;
  opacity: 0;
}


.mfilter-col-label::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    margin: 0px 10px 0px 10px;
    border: 1px solid #726f6f;
    box-sizing: border-box;
    background: #f5f6f6;
    border-radius: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 90% 90%;
}

.mfilter-col-input input:checked + .mfilter-col-label::before {
    border-color: #347a89;
    background-color: #347a89;
}

<div class="mfilter-col-input ">
  <input class="mfilter-col-inp" id="mfilter-opts" type="checkbox" value="текст">
</div>
<label class="mfilter-col-label" for="mfilter-opts">
  Текст
</label>

Answer 1

Основная загвоздка была в том что элементы должны быть соседними, т.е. нет возможности определить див в котором чекбокс установлен (чекбокс будет выбран в качестве результата, не див)

Стили я тоже немного поправил, но это уже дело вкуса, основной упор на разметке.

.mfilter-col {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mfilter-col .mfilter-col-inp {
  align-self: flex-start;
}

.mfilter-col-label::before {
  content: "";
  display: inline-block;
  position: absolute;
  top:  6px;
  left: 0px;
  width: 20px;
  height: 20px;
  margin: 0px 10px 0px 10px;
  border: 1px solid #726f6f;
  box-sizing: border-box;
  background: #f5f6f6;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 90% 90%;
}

.mfilter-col-inp:checked + .mfilter-col-label::before {
  border-color: #347a89;
  background-color: #347a89;
}

<div class="mfilter-col">
<input class="mfilter-col-inp" id="mfilter-opts" type="checkbox" value="текст">
<label class="mfilter-col-label" for="mfilter-opts">
  Текст
</label>
<div>

БЛОГ НА HUSL

Стилизация checkbox?

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