风格的收音机适用于Firefox，但不适用于Chrome

Question

我使用这种风格来设置单选按钮的样式，它在Firefox上运行良好，但在Chrome上运行不正常。单击收音机后警报仍然有效，但样式没有改变

http://jsfiddle.net/c2veopa3/2/

.example{
margin-bottom : 1.5em;
}

input[type=radio   ]:not(old){
width   : 28px;
margin  : 0;
padding : 0;
opacity : 0;
}

input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('http://mawk3y.net/cards/checks.png') no-repeat 0 0;
  line-height  : 24px;
}

input[type=radio]:not(old):checked + label{
background-position : 0 -48px;
}

Answer 1

它应该像这样工作;） http://jsfiddle.net/c2veopa3/5/

input[type=radio] {
  display: none;
}
input[type=radio] + label:before{
  content: '';
  width: 24px;
  height:24px;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  background: url('http://mawk3y.net/cards/checks.png') no-repeat; 
  background-position: 0 0;
}

input[type=radio]:checked + label:before{
  background-position : 0 -48px;
}