I am experiencing difficulty focusing the pointer inside this customized radio button.
<div class="radio">
<input id="left" type="radio" name="gender" value="left">
<label for="left">Left</label>
<input id="right" type="radio" name="gender" value="right">
<label for="right">Right</label>
</div>
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #ffffff;
border: 3px solid;
border-color: #bababa;
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #373c3e;
font-size: 60px;
text-align: center;
line-height: 16px;
}
Below is an example to demonstrate the issue.
Check out https://jsfiddle.net/drag/rbhzpvn3/1/