Radiobutton styling with css - html

Question

I am trying to style my Radio button with CSS. When the button is unchecked it should have a black border and and when its checked the circle should be completely black. Sadly my Code doesn't work.
My Code:
<div class="radioss">
<input type="radio" id="mann" name="selector">
<label for="mann">Mann</label>
</div>
<div class="radios">
<input type="radio" id="mann" name="selector">
<label for="mann">Frau</label>
</div>
.radioss{
float:left;
}
.radios{
float:left;
}
/*Radiobutton*/
input[type="radio"] {
display:none;
}
.mann:not(checked) + label:before{
content:" ";
display: inline-block;
border: 2px solid black;
width: 13px;
height:13px;
border-radius:7px;
}
.mann:checked + label:before{
background-color:black;
}
Does somebody have any idea what i am doing wrong?

Answer 1

You cannot use same or single ID for more than one elements, It won't work.
.radioss input[type=radio] {
display: none;
}
.radioss input[type=radio]:not(:checked) + label:before {
content: "";
border: 2px solid #000;
height: 10px;
width: 10px;
display: inline-block;
border-radius:7px;
}
.radioss input[type=radio]:checked + label:before {
content: "";
border: 2px solid #000;
height: 10px;
width: 10px;
background: #000;
display: inline-block;
border-radius:7px;
}
<div class="radioss">
<input type="radio" id="mann" name="selector">
<label for="mann">Mann</label>
<input type="radio" id="mann1" name="selector">
<label for="mann1">Frau</label>
</div>
Source: Checkbox styling only css

Answer 2

You can check the following link
its may help you.
.checkbox-form .lg-label:before {
content: '';
width: 18px;
height: 18px;
background-color: transparent;
margin-right: 10px;
margin-top: 5px;
border-radius: 50%;
border: 1px solid #afaeae;
}
input[type=checkbox]:checked + .lg-item-radio .checkbox-form .lg-label:before {
border-color: rgba(27, 205, 128, 0.6);
}
https://codepen.io/sifulislam/pen/dZvXjK