复选框和单选按钮样式在Firefox中不起作用

Question

我知道这是一个老问题，并且已经回答了很多次，但我无法弄清楚如何将修复基础与其他示例结合。

确定了复选框的样式后，它在Chrome和Opera中看起来不错（它应该看起来很好），但在Firefox和IE中它仍然看起来像同样丑陋的复选框。有没有简单的方法来解决这个问题，因此它在所有浏览器中看起来都一样？如果是的话，有人可以看到我的CSS全新视图，请帮我解决这个问题。我正在使用联系表单7，所以HTML不可更改，或者我会根据其他教程自行更改HTML代码和样式。

/*Below is for Radio Buttons*/ 
 
.wpcf7-form-control.wpcf7-radio input[type="radio" ] { 
 
    margin: 5px 20px 0px 3px; 
 
    border: 2px solid #35a4d5; 
 
    padding: 10px; 
 
    -webkit-appearance: none; 
 
    border-radius: 50%; 
 
} 
 
.wpcf7-list-item.first .wpcf7-list-item-label,.wpcf7-list-item.last .wpcf7-list-item-label { 
 
    font-size: 18px; 
 
    vertical-align: 5px; 
 
} 
 
.wpcf7-form-control.wpcf7-radio input[type="radio" ]:checked{ 
 
    background:#555; 
 
    box-shadow: inset 0px 0px 0px 3px white; 
 
    -webkit-box-shadow: inset 0px 0px 0px 3px white; 
 
    -moz-box-shadow: inset 0px 0px 0px 3px white; 
 
    -o-box-shadow: inset 0px 0px 0px 3px white; 
 
    -webkit-border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -o-border-radius: 100%; 
 
} 
 
.wpcf7-form-control.wpcf7-radio input:focus{ 
 
    outline:none; 
 
} 
 
/*END*/ 
 

 

 

 
/*Below is for Check Boxes*/ 
 
.wpcf7-form-control.wpcf7-checkbox input[type="checkbox" ]{ 
 
    margin: 5px 4px 0px 3px; 
 
    border: 2px solid #35a4d5; 
 
    padding: 10px; 
 
    -webkit-appearance: none; 
 
} 
 
.wpcf7-list-item.first.last .wpcf7-list-item-label{ 
 
    font-size: 20px; 
 
    vertical-align: 5px; 
 
} 
 
.wpcf7-form-control.wpcf7-checkbox input[type="checkbox" ]:checked{ 
 
    background:#555; 
 
    box-shadow: inset 0px 0px 0px 3px white; 
 
    -webkit-box-shadow: inset 0px 0px 0px 3px white; 
 
    -moz-box-shadow: inset 0px 0px 0px 3px white; 
 
    -o-box-shadow: inset 0px 0px 0px 3px white; 
 
} 
 
.wpcf7-form-control.wpcf7-checkbox input:focus{ 
 
    outline:none; 
 
} 
 
/*END*/

<span class="wpcf7-form-control-wrap RVCategory"> 
 
    <span class="wpcf7-form-control wpcf7-radio"> 
 
      <span class="wpcf7-list-item first"> 
 
       <span class="wpcf7-list-item-label" style="">Motorhome 
 
       </span> &nbsp; 
 
<input type="radio" name="RVCategory" value="Motorhome" checked="checked"> 
 
</span> 
 
<span class="wpcf7-list-item last"> 
 
      <span class="wpcf7-list-item-label">Trailer 
 
      </span>&nbsp; 
 
<input type="radio" name="RVCategory" value="Trailer"> 
 
</span> 
 
</span> 
 
</span> 
 
<p></p> 
 
<span class="myCheckboxes"> 
 
    <span class="wpcf7-form-control-wrap checkbox-112"> 
 
      <span class="wpcf7-form-control wpcf7-checkbox"> 
 
       <span class="wpcf7-list-item first last"> 
 
        <input type="checkbox" name="checkbox-112[]" value="Electric Generator">  
 
        <span class="wpcf7-list-item-label">Electric Generator</span> 
 
       </span> 
 
      </span> 
 
    </span> 
 
</span>

Answer 1

我最近刚做，需要定制选和单选样式的是跨浏览器兼容的要求的项目。不幸的是，仅仅通过设计input标签，你无法在Firefox和大多数IE中实现它。这是我使用的方法，如果你愿意重构你的HTML一点。

我很快就把它拍了下来，所以我可能错过了用于制作的一些东西。它非常简单，HTML只需要在输入之后输入和标签。

<input type="checkbox" id="checkbox1" name="checkbox"> 
<label for="checkbox1">Checkbox One</label> 

现在的CSS看起来像：

/* Hide inputs visually from being seen - don't use display: none as this will break in accessibility */ 
input[type="checkbox"], 
input[type="radio"] { 
    float: left; 
    opacity: 0.01; 
    position: absolute; 
} 

input[type="checkbox"] + label, 
input[type="radio"] + label { 
    display: inline-block; 
    line-height: 1.4; 
    margin: 0; 
    padding-left: 30px; 
    position: relative; 
} 

/* Actually create a fake input element with pseudo */ 
input[type="checkbox"] + label::before, 
input[type="radio"] + label::before { 
    background: no-repeat center center; 
    border: 1px solid #a6a6a6; 
    border-radius: 3px; 
    content: ""; 
    cursor: pointer; 
    display: block; 
    height: 20px; 
    left: 0; 
    position: absolute; 
    top: -1px; 
    width: 20px; 
} 

/* Fake Styling for checked state */ 
input[type="checkbox"]:checked + label::before, 
input[type="radio"]:checked + label::before { 
    background-color: #00ba00; 
    background-image: url(something); 
    background-size: 10px 8px; 
    border-color: #00ba00; 
} 

/* Because this element isn't actually an input I've added the accessibility focus rings */ 
input[type="checkbox"]:focus + label::before, 
input[type="radio"]:focus + label::before { 
    outline: auto 5px -webkit-focus-ring-color; 
} 

/* Radio button styling */ 
input[type="radio"] + label::before { 
    border-radius: 50%; 
} 

input[type="radio"]:checked + label::before { 
    background-color: #00ba00; 
    background-image: url(something); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: 8px 8px; 
} 

下面是它在行动http://codepen.io/jerrylow/pen/BzPkZw