Firefox 没有为单选按钮加载 CSS

Question

所以我有这个用于单选按钮的 html 代码，它在 chrome 上完美运行，但 Firefox 上单选按钮的 css 无法正常工作。可能是什么问题？那是我有的代码，我有什么遗漏吗？

input[type='radio'] {
 
    border-radius:50%;
    outline:none;
}

input[type='radio']:before {
    content:'';
    display:block;
    width:50%;
    height:50%;
    margin: 25% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background-color: #0496fd;
}

.bob-bound
{   
    padding-bottom:0.2px;
	padding-right:10px;
	margin:auto;
	border: solid 0px blue;
	height: 110px;
	position:relative;
	background-color: #f5f5f5;
}

.bob-bound-type-lable{
	position: absolute;
	margin-top:20px;
	margin-left:30px;
	border: solid 0px red;
	width: 239px;
    height: 18px;
    font-family: HelveticaNeue-Light, Arial;
    font-size: 16px;
    color: #000000;
}

.bob-button {
    width: 250px;
    height: 46px;
    vertical-align:right;
    background-color: #ffffff ;
    border: solid 1px #bfbfbf;
    padding-left:5px;
    font-family: ArialMT, Arial, sans-serif;
    font-size: 15px;
    margin-left:12px;
    cursor:pointer;
}
.bob-button:hover {
	background-color: #f3f8fd;
}


.bob-recommendation-button
{   
    position:absolute;
	right:0px;
	width: 292px;
	top:49px;	
	border: solid 0px red;
}

.bob-Inbound{
    position:absolute;
    top:6px;
    margin-left:8px;
    width: 112px;
    height: 17px;
    font-family: ArialMT, Arial, sans-serif;
    font-weight:bold;
    font-size: 16px;
    border: solid 0px red;
}

.bob-Outbound {
	position:absolute;
	top:6px;
	margin-left:12px;
    width: 239px;
    height: 17px;
    font-family: ArialMT, Arial, sans-serif;
    font-weight:bold;
    font-size: 16px;
    border: solid 0px red;
    margin-bottom:20px;
}
.bob-bound-type{
	position: absolute;
	width:437px;
	margin-top:56px;
	font-size: 14px;
	margin-left:27px;
	border: solid 0px red;
}
.bob-radio{
    background:green;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    border: solid 1px #bbbbbb;
}

.bob-second-radio{
	margin-left:120px;
}

<div class="bob-bound">
    <div class="bob-bound-type-lable">
        Contact Type
    </div>

    <div class="bob-bound-type">
        <input type="radio" name="radiogroup" id="Inbound" class="bob-radio" value="Inbound" checked="checked"/>
        <label for="Inbound" class="bob-Inbound">Inbound</label>
        <input type="radio" name="radiogroup" id="Outbound" class="bob-radio bob-second-radio" value="Outbound"/>
        <label for="Outbound" class="bob-Outbound">Outbound</label>
    </div>
</div>

这是它应该显示的方式：

Answer 1

普遍的共识是，在 Firefox 中使用 CSS 设置单选按钮的样式是徒劳的。但是有几种解决方法可以达到相同的效果。我个人最喜欢的是隐藏实际的单选按钮，而是使用图像来显示它是选中还是未选中。

这里有一个很好的工作示例：

Mozilla Firefox input radio button styling and default settings

Answer 2

样式化输入元素（特别是单选按钮和复选框）在导航器中可能不可靠。最好将样式应用于标签或伪元素。