Radiobutton styling with css

Question

Я пытаюсь создать свою радио кнопку с помощью CSS. Когда кнопка не установлена, она должна иметь черную рамку, и когда ее проверили, круг должен быть полностью черным. К сожалению, мой код не работает.

Мой код:

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

ли кто-то есть идея, что я делаю не так?

Answer 1

Вы не можете использовать один или несколько идентификаторов для нескольких элементов, это не сработает.

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

Источник: Checkbox styling only css