Radiobutton造型与CSS

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