Kontrollkästchen und Radio-Button-Styling funktioniert nicht in Firefox

Question

Ich weiß, das ist ein altes Problem und wurde oft beantwortet, aber ich kann nicht herausfinden, wie man eine feste Basis von den anderen Beispielen einbaut.

Ok nach dem Styling der Checkbox, sieht es gut in Chrome und Opera (wie es aussehen soll), aber in Firefox und IE sieht es immer noch wie die gleichen hässlichen Kontrollkästchen aus. Gibt es eine einfache Möglichkeit, dies zu beheben, so dass es in allen Browsern gleich aussieht? Wenn ja, könnte mir jemand mit einer frischen Sicht auf mein CSS helfen, dies zu beheben. Ich verwende das Kontaktformular 7, so dass der HTML-Code nicht veränderbar ist oder ich den HTML-Code selbst ändern und entsprechend anderen Tutorials formatieren würde.

/*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

Ich habe gerade vor kurzem ein Projekt, das mit der Anforderung individueller Checkbox und Radio Arten erforderlich Cross-Browser-konform zu sein. Leider nur durch das Styling der input Tag können Sie es nicht in Firefox und den meisten IE für diese Angelegenheit erreichen. Dies ist die Methode, die ich verwende, wenn Sie Ihren HTML-Code ein wenig umstrukturieren möchten.

Ich schlug das schnell zusammen, damit ich etwas vermisst habe, das ich in der Produktion verwendet habe. Ganz einfach erfordert der HTML-Code nur die Eingabe und die Beschriftung nach der Eingabe.

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

Jetzt sieht die CSS wie:

/* 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; 
} 

ein codepen es hier in Aktion http://codepen.io/jerrylow/pen/BzPkZw