无法在单选按钮内居中大点答案

【问题标题】：Cannot center large dot inside radio button无法在单选按钮内居中大点
【发布时间】：2019-11-11 06:10:22
【问题描述】：

我试图将点放在单选按钮内的中心，这是一项令人筋疲力尽的工作，因为我无法弄清楚到底该怎么做。

我的最终作品应该是这样的：

我得到的是这样的：

我的代码：

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>

我在这里缺少什么？我知道我快到了

【问题讨论】：

标签： css radio-button

【解决方案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>

【讨论】：