Почему коробка-размер не работает для переключателей?

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

Трудно определить, не видя кода (не каждый может получить доступ к codepen), но это может быть потому, что вам также необходимо установить display от элемента к расчетному значению блока (поэтому он соответствует высоте/ширине), например:

input{ 
    display:inline-block; 
} 

Вы также можете проверить соответствующий compatability

Answer 2

Вы устанавливаете ширину и высоту в вашем .radio-BTN CSS 0. Если установить каждый на 12px (в соответствии с вашими другими стилями) Я думаю, что это будет выглядеть так, как вы этого хотите.

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