(两个浏览器的最新版本都已到位 - 表单由 Gravity Forms 输出，因此不能对 html 架构做太多事情)
我在 Chrome 中的输出基本上是完美的 - 它是一个带有边框和中央空白的圆圈，单击时会填充背景(成为一个完整的彩色圆圈)。
但是，即使我在 Firefox 中关闭 -moz-appearance，它也根本不是样式 - 只是给我一个扁平的黑色单选按钮。代码如下:任何帮助将不胜感激。
body .gform_body .gfield ul.gfield_radio li input{
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
width: 15px !important;
height: 15px !important;
}
body .gform_body .gfield ul.gfield_checkbox li input{
-webkit-appearance: none;
display: inline-block;
width: 15px !important;
height: 15px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio input {
border-radius: 8px !important;
border: 4px solid #c4e7e3 !important;
}
html:
<li id="field_1_7" class="gfield radio_1">
<label class="gfield_label">Hello! Are you: </label>
<div class="ginput_container">
<ul class="gfield_radio" id="input_1_7">
<li class="gchoice_7_0">
<input name="input_7" type="radio" value="Ready to get started? "checked="checked" id="choice_7_0" tabindex="3" onclick="gf_apply_rules(1,[8,6]);">
<label for="choice_7_0">Ready to get started? </label></li>
<li class="gchoice_7_1">
<input name="input_7" type="radio" value="Or just saying hello!" id="choice_7_1" tabindex="4" onclick="gf_apply_rules(1,[8,6]);">
<label for="choice_7_1">Or just saying hello!</label></li></ul></div></li>
非常感谢任何关于路线的帮助。
最佳答案
当您尝试更改表单元素(如单选框、复选框和选择)的外观时，您应该使用一些 JS 代码或插件来更改它们，因为仅使用 css 有太多限制，您将无法获得想要的在其他浏览器上的结果。
尝试像 ezMark 这样简单的东西或其他一些插件以获得所需的效果。
关于html - Chrome 中的单选按钮样式正确 - 在 Firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16386137/