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，它不会起作用。

＆＃13;

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

＆＃13;

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

＆＃13;

来源：Checkbox styling only 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

Radiobutton造型与CSS

2 个答案: