Firefox浏览器下radio单选按钮自定义样式不生效如何解决

问题原因 #

Firefox 出于标准规范兼容性考虑，不支持为 <input type="radio"> 这类可替换元素直接添加 ::before/::after 伪元素，Chrome、Edge 等浏览器是额外做了非标准兼容才支持你的原有写法，所以写在radio上的伪元素样式在Firefox里完全不会渲染。

解决方案 #

最优兼容方案是隐藏原生radio，依托关联的label元素的伪元素实现自定义样式，该方案兼容所有主流浏览器，也不需要修改你的原有HTML结构。
完整修改后的CSS代码如下：

/* 隐藏原生radio */
.input-radio[type='radio'] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    opacity: 0;
}

/* 给label加左侧内边距，预留自定义单选框位置 */
.input-radio[type='radio'] + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    line-height: 24px;
}

/* 自定义未选中状态样式 */
.input-radio[type='radio'] + label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: #fff;
    border: 2px solid #776330;
}

/* 自定义选中状态样式 */
.input-radio[type='radio']:checked + label::after {
    background-color: #776330;
    box-shadow: inset 0 0 0 2px #fff;
}

你原有HTML代码不需要做任何调整，直接替换CSS即可生效。另外你的原有代码里两个id的样式完全重复，用类选择器统一写更简洁，后续新增同样式的radio也不需要重复加CSS。

内容的提问来源于stack exchange，提问作者Sallar Rabiei