为什么盒子大小不适用于单选按钮？

Question

我尝试制作自定义radio button，但我无法理解为什么box-sizing不起作用。

Chrome：

FireFox：

我错过了什么？

HTML：

<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>
<input class="radio-btn" type="radio" name="a"/>

CSS：

.radio-btn {
  appearance: none;
  box-sizing: border-box;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 0 0 2px #000;
  transition: .2s border-color;
  cursor: pointer;
}
.radio-btn:checked {
  width: 12px;
  height: 12px;
  border: 3px solid #000;
  box-shadow: 0 0 1px 2px #000;
}
.radio-btn:hover {
  box-shadow: 0 0 1px 2px #000;
}
.radio-btn:focus {
  outline: 0;
}

http://jsfiddle.net/u86xboqd/

Answer 1

您可以将.radio-btn css中的宽度和高度设置为0.如果将每个设置为12px（以匹配其他样式），我认为它将按您希望的方式显示。

.radio-btn {
  width: 12px;  
  height: 12px;
}

Answer 2

很难确定没有看到代码（不是每个人都可以访问codepen），但可能是因为你还需要将元素上的display设置为块可计算值（因此它尊重高度/宽度），例如：

input{
  display:inline-block;
}

您可能还希望查看相关的compatability