Как добавить круглую рамку внутри переключателя с помощью CSS?

Question

У меня есть переключатель. Я хочу, чтобы внутри него была круглая рамка.

Вот как это должно выглядеть

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

Я не могу получить то, что хочу, что мне нужно изменить, чтобы получить то, что я хочу?

Answer 1

Попробуйте это

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