Firefox不加载单选按钮的CSS [英] Firefox not loading css for radio buttons

问题描述

所以我有这个HTML代码的单选按钮，它在Chrome上工作得很完美，但是Firefox上的单选按钮的CSS无法工作。有什么可能是问题？这是我有的代码，有什么遗漏？

  input [type ='radio'] {border-radius：50％; outline：none;} input [type ='radio']：before {content：'';显示：块;宽度：50％;高度：50％;保证金：25％汽车;边界半径：50％; } input [type ='radio']：checked：before {background-color：＃0496fd;}。bob-bound {padding-bottom：0.2px;填充右：10px的;保证金：汽车;边框：实心0px蓝色; height：110px;位置：相对; background-color：＃f5f5f5;}。bob-bound-type-lable {position：absolute;边距：20像素;保证金左：30PX;边框：实心0px红色;宽度：239px;身高：18px; font-family：HelveticaNeue-Light，Arial; font-size：16px;颜色：＃000000;}。bob-button {width：250px; height：46px;垂直对齐：右; background-color：#ffffff; border：solid 1px #bfbfbf;填充左：5px的; font-family：ArialMT，Arial，sans-serif; font-size：15px;保证金左：12px的; cursor：pointer;}。bob-button：hover {background-color：＃f3f8fd;}。bob-recommendation-button {position：absolute;右：0像素;宽度：292px;顶部：49px; border：solid 0px red;}。bob-Inbound {position：absolute;顶部：6像素;保证金左：8像素;宽度：112px; height：17px; font-family：ArialMT，Arial，sans-serif;字体重量：粗体; font-size：16px; border：solid 0px red;}。bob-Outbound {position：absolute;顶部：6像素;保证金左：12px的;宽度：239px; height：17px; font-family：ArialMT，Arial，sans-serif;字体重量：粗体; font-size：16px;边框：实心0px红色; margin-bottom：20px;}。bob-bound-type {position：absolute;宽度：437px;边距：56px; font-size：14px;保证金左：27px; border：solid 0px red;}。bob-radio {background：green;宽度：24px;身高：24px; background-color：#ffffff; border：solid 1px #bbbbbb;}。bob-second-radio {margin-left：120px;}  

 < div class =bob-bound> < div class =bob-bound-type-lable>联系人类型< / div> < div class =bob-bound-type> < input type =radioname =radiogroupid =Inboundclass =bob-radiovalue =Inboundchecked =checked/> < label for =入站class =bob-Inbound>入站< / label> < input type =radioname =radiogroupid =Outboundclass =bob-radio bob-second-radiovalue =Outbound/> < label for =Outboundclass =bob-Outbound> Outbound< / label> < / div>< / div>  

它应该显示的方式：

< img src =https://i.stack.imgur.com/dCud2.pngalt =在这里输入图片描述>

解决方案

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

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

Mozilla Firefox输入收音机按钮样式和默认设置

so i have this html code for radio buttons which works perfect on chrome but the css for radio buttons on firefox isnt working. What could be the problem?that is the code i have,is there anything im missing?

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>

this is the way its supposed to display:

解决方案

The general consensus is that styling radio buttons in Firefox with CSS is a fool's errand. But there are several workarounds that achieve the same effect. My personal favorite is to hide the actual radio button and instead use images to show if it is checked or unchecked.

There's a nice working example here:

Mozilla Firefox input radio button styling and default settings

这篇关于Firefox不加载单选按钮的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！