Firefox不加载单选按钮的CSS

本文介绍了Firefox不加载单选按钮的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 所以我有这个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> 它应该显示的方式： 解决方案普遍的共识是，在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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！