Trying to customize a radio button and align its label next to it using CSS has proven to be more challenging than expected.
The current setup is not producing the desired outcome as the radio button appears distorted and the label is not perfectly inline with it.
The ultimate goal is to achieve a layout similar to this:
This is what has been accomplished thus far:
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background: #fff;
border: solid 2px #000;
height: 20px;
width: 20px;
display:inline-block;
padding: 0 0 0 0px;
border-radius:50%;
}
input[type="radio"]:checked + label
{
background: #000;
height: 20px;
width: 20px;
display:inline-block;
padding: 0 0 0 0px;
border-radius:50%;
}<input type="radio" id="male" name="gender" value="M">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="F">
<label for="female">Female</label>Edit:
The main challenge now is to ensure all the radio buttons and labels are displayed in a single line.