我有一段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>