自定义CSS不工作的单选按钮选择FF/ IE

Question

我使用自定义css样式我的单选按钮，如下所示:

input[type="radio"] {
    display: none;
}
input[type="radio"]{
    display: inline-block;
    width:19px;
    height: 19px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    -moz-border-radius: 50%;
    outline:none;
    border-radius: 50%;
    border: 1px solid rgb(70, 121, 189);
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}
label{
    top: 0.2rem;
    position: relative;
    cursor:pointer;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:74%;
    height:72%;
    margin: 11% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    rgb(70, 121, 189);
}

与上面的CSS

选中单选按钮的颜色仅在Chrome中改变，但在IE和FF中不改变，并且点也没有正确居中。

我不想使用input[type="radio"] + Label样式，因为我正在使用JSF单选按钮，如下所示。"+ label"CSS在JSF单选按钮中不起作用:(

<h:selectOneRadio value="#{value.from.backing.bean}" >
    <f:selectItem itemValue="active" itemLabel="#
      {text['from.property.file']}"  />
    <f:selectItem itemValue="active2" itemLabel="#
      {text['from.property.file']}" />
    <f:ajax listener="#{backing.method}" render=":form"/>
</h:selectOneRadio>

JS Fiddle here Radio

有什么想法吗?

Answer 1

我已经改变了实现方式和

这是我为自己和其他需要的开发人员提供的另一种方法;)