Having trouble with my customized checkbox CSS. The outline and border aren't consistent when focusing or clicking. I attempted to apply the same properties to the focus pseudo class with no success. Below is the HTML and CSS code for my checkbox:
HTML:
<label class="form__field__input__label"><input class="form__field__input__checkbox" type="checkbox" name="World languages" value="">World languages</label>
CSS:
.form__field__input__label {
flex: 0 0 25%;
margin: 30px 0;
display: flex;
font-family: 'NotoSans';
font-size: 18px;
line-height: 26px;
color: #4e4f4f;
.form__field__input__checkbox {
width: 25px;
height: 24px;
margin-right: 15px;
position: relative;
border: solid 1px #4e4f4f;
outline: solid 0.5px $labelColor;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
&:checked::before {
content: "";
position: absolute;
width: 15px;
height: 14px;
top: 4px;
right: 4px;
background-color: #4e4f4f;
transition: all 0.3s linear;
}
&:checked:focus {
outline: solid 0.5px $labelColor;
}
}
}