html - 为什么 box-sizing 不适用于单选按钮？

Question

我尝试定制 radio button ，但我不明白为什么 box-sizing 不起作用。

Chrome :

火狐:

我错过了什么？

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;
}