Question

（两个浏览器的最新版本到位 - 表格由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>

非常感谢任何有关路线的帮助。

Answer 1

当您尝试更改表单元素的外观（如收音机，复选框和选择）时，您应该使用某些JS代码或插件更改它们，因为仅对css有太多限制而您将无法获得所需其他浏览器的结果。

尝试使用简单的ezMark或其他插件来获得想要的效果。

Chrome中的单选按钮样式正确 - 不适用于Firefox

1 个答案: