Html 使用css的Radiobutton样式

我正在尝试用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;
}

曼恩
夫人
.收音机{
浮动：左；
}
.收音机{
浮动：左；
}
/*单选按钮*/
输入[type=“radio”]{
显示：无；
}
.mann:未（选中）+标签：之前{
内容：“；
显示：内联块；
边框：2件纯黑；
宽度：13px；
高度：13px；
边界半径：7px；
}
.mann:选中+标签：之前{
背景色：黑色；
}

---

有人知道我做错了什么吗？

不能对多个元素使用同一个或单个ID，它将不起作用

.radios输入[类型=无线电]{
显示：无；
}
.收音机输入[类型=收音机]：未（：已选中）+标签：之前{
内容：“；
边框：2倍实心#000；
高度：10px；
宽度：10px；
显示：内联块；
边界半径：7px；
}
.收音机输入[类型=收音机]：选中+标签：之前{
内容：“；
边框：2倍实心#000；
高度：10px；
宽度：10px；
背景：#000；
显示：内联块；
边界半径：7px；
}

曼恩
夫人

您可以查看以下链接 这可能对你有帮助

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

---

您的收音机有一个

id

，但您的选择器试图找到一个

类。将
id=“mann”
更改为
class=“mann”
（作为
id
在文档中只应出现一次）。还要给他们一个唯一的id，标签应该与之对应。有活的例子吗？