LESS
.checkbox {
margin: 50px;
&__label {
font-size: 1rem;
display: inline-block;
margin: 0;
vertical-align: top;
}
&__input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
bottom: 2px;
cursor: pointer;
display: inline-block;
height: 17px;
margin: 0 8px 0 0;
position: relative;
vertical-align: middle;
width: 17px;
&::before {
background-color: white;
border: 1px solid blue;
border-radius: 2px;
content: "";
display: block;
height: 17px;
position: absolute;
width: 17px;
}
&:checked::after {
border: solid blue;
border-width: 0 2px 2px 0;
content: "";
display: block;
height: 10px;
left: 6px;
position: absolute;
top: 2px;
transform: rotate(45deg);
width: 5px;
}
&select::-ms-expand {
display: none;
}
}
}
1 Response
Accessibility ready.