如何为单选按钮修复:: before伪元素的边框锯齿状isuue？

Question

这是Example of jsfiddle

我用自定义CSS创建了虚拟单选按钮， 正如您在上面的示例中所看到的，边框看起来是锯齿状的。

我在框阴影下添加了以下自定义css

input[type='radio']:checked + label:before {
    background: #3A3A3A;
    box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}

在这里你可以看到差异

没有border-radius似乎是 -

带有border-radius的

似乎是 -

您可以看到这两张图片的区别，

请参阅以上小提琴示例并提出一些建议。

Answer 1

为li

添加保证金

ul.gfield_radio li{
  padding-bottom: 5px;
}

.gfield_radio input[type='radio']+label:before {
  content: '';
  background: #DEDEDE;
  border: 1px solid #359947;
  display: inline-block;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
  border-radius: 50%;
  box-sizing: border-box;
}

.gfield_radio input[type='radio'] {
  display: none;
}

.gfield_radio input[type='radio']:checked+label:before {
  background: #3A3A3A;
  box-shadow: inset 0px 0px 0px 4px #DEDEDE;
}

ul {
  list-style: none;
  margin-left: 0;
}

ul.gfield_radio li {
  padding-bottom: 5px;
}

ul.gfield_checkbox li label {
  display: inline-block;
  line-height: 1.2;
}

<ul class="gfield_radio" id="input_1_3">
  <li class="gchoice_1_3_0">
    <input name="input_3" type="radio" value="First Choice" id="choice_1_3_0" tabindex="2">
    <label for="choice_1_3_0" id="label_1_3_0">
			First Choice
		</label>
  </li>
  <li class="gchoice_1_3_1">
    <input name="input_3" type="radio" value="Second Choice" id="choice_1_3_1" tabindex="3">
    <label for="choice_1_3_1" id="label_1_3_1">
			Second Choice
		</label>
  </li>
  <li class="gchoice_1_3_2">
    <input name="input_3" type="radio" value="Third Choice" id="choice_1_3_2" tabindex="4">
    <label for="choice_1_3_2" id="label_1_3_2">
			Third Choice
		</label>
  </li>
</ul>