无法将单点按钮内的大圆点居中

Question

我正在尝试将圆点放在单选按钮的中央，这有点累人，因为我无法确切地知道该怎么做。

我的最终作品应如下所示：

我得到的是这样的：

我的代码：

input[type='radio'] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  border: 1px solid #99AFC1;
}

input[type='radio']:before {
  content: '';
  display: block;
  height: 95%;
  border-radius: 50%;
  line-height: 14px;
}

input[type="radio"]:checked:before {
  background: #00AEEF;
}

input[type="radio"]:checked {
  border-color: #00AEEF;
}

<input type="radio" id="r1" name="rr" />
<label for="r1">Radio Button 1</label>

我在这里想念什么？我知道我快到了

Answer 1

这是一个简单的主意，只需较少的代码，并且只有背景色：

input[type='radio'] {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  border: 1px solid #99AFC1;
  padding:2px; /* Control the space between border and background */
}

input[type="radio"]:checked {
  border-color: #00AEEF;
  background: #00AEEF content-box; /* Don't color the padding area */
}

<input type="radio" id="r1" name="rr" />
<label for="r1">Radio Button 1</label>