Radiobutton Styling mit CSS

Question

Ich versuche, meinen Radio-Button mit CSS zu stylen. Wenn die Schaltfläche deaktiviert ist, sollte sie einen schwarzen Rahmen haben und wenn sie markiert ist, sollte der Kreis komplett schwarz sein. Leider funktioniert mein Code nicht.

Mein 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; 
} 

Hat jemand eine Ahnung, was ich falsch mache?

Answer 1

Sie können nicht dieselbe oder einzelne ID für mehr als ein Elemente verwenden, es wird nicht funktionieren.

.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>

Quelle: Checkbox styling only css