火狐浏览器无法加载单选按钮的CSS

Question

我有一段HTML代码用于创建单选按钮，它在Chrome上运行良好，但是Firefox中的单选按钮样式不起作用。可能的问题是什么？这是我的代码，我是否漏掉了某些内容？

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>

这是它应该显示的方式：

- fulufhelo mudau

---

输入元素不支持伪元素：https://dev59.com/hHA65IYBdhLWcg3w-jum - twxia

Answer 1

普遍认为使用CSS样式化Firefox中的单选按钮是徒劳无功的。但有几种方法可以实现相同的效果。我个人最喜欢的方法是隐藏实际的单选按钮，而是使用图像来显示其是否选中。

这里有一个不错的工作示例：

Mozilla Firefox输入单选按钮样式和默认设置

- az0

---

非常感谢您提供的链接，解决方案完美地运行了 @az0 - fulufhelo mudau

Answer 2

元素的样式化（尤其是单选按钮和复选框）在各种浏览器中可能会不可靠。最好将样式应用于或伪元素。

- Maëlig