Radiobutton造型與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

您不能對多個元素使用相同或單個ID，它將無法工作。

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

來源： 復選框樣式只有CSS

Answer 2

您可以查看以下鏈接，它可能會對您有所幫助。

.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