Я пытаюсь оформить флажок Bootstrap 4 без метки:
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1">
</div>
Мои стили проб и ошибок:
.form-check {
.form-check-input {
color: #2c2b2c;
font-size: 12px;
line-height: 2.7;
padding-left:15px;
text-transform: uppercase;
background-color: red;
}
.form-check-input::after,
.form-check-input::before {
height: 25px;
width: 25px;
}
.form-check-input::before {
background-color: #fff;
border: 1px solid #2c2b2c;
}
}
}
Я могу стилизовать версию метки, но безуспешно с этой версией.
ОБНОВЛЕНИЕ: Как упоминалось @ mebin-joe, это известная проблема: https://github.com/twbs/bootstrap/issues/26221 В итоге я использовал элемент флажка Bootstrap и стилизовал его:
.custom-checkbox .custom-control-input:checked~.custom-control-label::before
{
background-color: #caca4c;
}
.custom-control-input:checked~.custom-control-label::before {
color: #fff;
background-color: #caca4c;
}