Как правильно стилизовать 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>