I am attempting to create small circles that act like radio buttons without any spacing between them. I was successful in achieving this, but I ran into issues with removing the space between the circles. The margin between two circles should be limited to 1px and their width and height should not exceed 8px each.
Below is the code:
<input type='radio' name='a' checked/>
<input type='radio' name='a'/>
input[type='radio'] {
-webkit-appearance:none;
width:8px;
height:8px;
border:1px solid darkgray;
border-radius:50%;
outline:none;
box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
content:'';
display:block;
width:100%;
height:100%;
/*margin: 20% auto; */
border-radius:50%;
}
input[type='radio']:checked:before {
background:green;
}
input[type='radio']:before {
content:'';
display:block;
width:100%;
height:100%;
/*margin: 20% auto; */
border-radius:50%;
}