Ошибка чекбокса в Safari. Как исправить?

Сделал красивые чекбоксы с применением псевдоэлементов :after. На всех браузерах нормально, а в Safari какой-то двойной чекбокс выводится. Из-под основного выглядывает стандартный маленький серый. В чем может быть проблема?

Вот html:

<input type="checkbox"/><label>name</label>

css:

input[type='checkbox'] 
{
display: none;
}
input[type='checkbox']:after 
{
font-size: 0;
font-family: 'times new roman';
line-height: 20px;
top: 0;
left: 0;
display: block;
width: 22px;
height: 22px;
content: '\2714';
-webkit-transition: all .1s linear;
   -moz-transition: all .1s linear;
        transition: all .1s linear;
text-align: center;
color: #fff;
border: 1px solid #333;
border-radius: 2px;
background-color: #fff;
box-sizing: border-box;
}
input[type='checkbox']:checked:after 
{
font-size: 18px;
background-color: #216a84;  /*#07b4d3*/
        text-shadow: 1px 1px 0 #05a4c1;
-webkit-text-shadow: 1px 1px 0 #05a4c1;
   -moz-text-shadow: 1px 1px 0 #05a4c1;
}