Checkbox and Radio button styling not working in Firefox

Question

I know this is an old issue and has been answered many times but I can not figure out how to incorporate a fix base off of the other examples.

Ok after styling the checkbox, it looks good in Chrome and Opera (how it is supposed to look), but in Firefox and IE it still looks like the same ugly checkboxes. Is there a easy way to fix this so it looks the same across all browsers? If so could someone with a fresh view of my CSS please help me to fix this. I am using contact form 7 so the HTML is not changeable or I would change the HTML code myself and style according to other tutorials.

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

edited the "i" out of the CSS and still nothing in FF and IE — Press Awesome, Jul 29 '16 at 22:45
ok look a this. this should fix your issue (I hope): http://stackoverflow.com/questions/19145504/style-a-checkbox-in-firefox-remove-check-and-border — Marouen Mhiri, Jul 29 '16 at 22:46
The HTML is not set up like mine. That example goes where he is using the empty to make the box. How can I achieve this with mine. I don't think I can....can I? — Press Awesome, Jul 29 '16 at 22:51

score 1 · Answer 1 · answered Jul 30 '16 at 01:05

I just recently did a project that required custom checkbox and radio styles with the requirement of being cross browser compliant. Unfortunately just by styling the input tag you can't achieve it in Firefox and most of IE for that matter. This is the method I use if you're willing to restructure your HTML a bit.

I slapped this together quickly so I may have missed somethings I used in production. Its quite simple the HTML just requires the input and the label following after the input.

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

Now the CSS looks like:

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

Here's a codepen of it in action http://codepen.io/jerrylow/pen/BzPkZw

Checkbox and Radio button styling not working in Firefox

1 Answers1