html - 如何使用CSS在单选按钮内添加圆形边框？

我有一个单选按钮，我想在其中圆形边框。

这是它的外观

input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #d1d3d1;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #000;
  font-weight: bolder;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}

<input id="delivery_option_13687_1" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="234," data-id_address="13687" value="234," checked="checked">

我无法得到我想要的东西，我需要改变以获得我想要的东西吗？

最佳答案

试试这个

input{
  position:relative;
}
input#inputRadioID:before {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}
input#inputRadioID:checked:after {
    width: 9px;
    height: 9px;
    border-radius: 100%;
    top: 1px;
    left: 2px;
    position: absolute;
    background-color: #000;
    font-weight: bolder;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
}
input#inputRadioID:checked:before {
    background-color: #000;
}

<input id="inputRadioID" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="234," data-id_address="13687" value="234,">