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单选按钮，如下所示。＆＃34 +标签＆＃34;这里的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

我改变了实施方式和

Here is another approach我自己和其他有需要的开发人员;）

自定义CSS不适用于单选按钮选择FF / IE

1 个答案: