Custom CSS Checkbox not working for Mozilla, works every other browser

Question

I have created a custom checkbox for a poll, I developed on Chrome, but once I was done I was browser testing and it didnt work for firefox at all. I attached a copy of my code in a codepen. Does anyone have another way of building a custom checkbox other than before and after psuedo classes?

 [1]: https://codepen.io/Edward-Developer/pen/NvRbzR


HTML

    <div class="img-icon-wrapper">
      <p>            
       <span class="wpcf7-form-control-wrap checkbox-972"><span class="wpcf7-form-
       control     wpcf7-checkbox wpcf7-exclusive-checkbox lori"><span 
       class="wpcf7-list-item first       last"><label><input type="checkbox" 
       name="checkbox-972" value="Lori St. Louis" />     <span class="wpcf7-list-
       item-label">Lori St. Louis</span></label></span></span>       </span>
      </p>
   </div>

CSS


input:before {
    position: absolute;
  width: 38px;
  background: #fff;
  height: 38px;
  content: "";
  border: 5.2px solid blue;
  top: 0;
}

input:before {
    position: absolute;
  width: 38px;
  background: #fff;
  height: 38px;
  content: "";
  border: 5.2px solid $lightBlue;
  top: 0;
}

input[type="checkbox"]:checked:after {
    position: relative;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -4px;
    content: "✓";
    height: 41px;
    width: 19px;
    -webkit-transform: rotate(7deg) skew(0deg);
    left: 8px;
    bottom: 38px;
    font-size: 65px;

}
input[type="checkbox"]:hover:checked:after {
  border-color: $darkBlue;
}

input[type="checkbox"]{
  margin-left:0;
}

@JasonSpradlin No codepen or fiddle necessary. The OP must include a [mcve] in their question and they can also format it using a built-in snippet to make it executable. — j08691, Aug 02 '17 at 20:48
Sorry for lag ! I just checked and codepen didnt go through, here it is ! — Edward, Aug 02 '17 at 20:52
We don't want a codepen. Read the comments above. You need to put your code **in your question**. Without the code in your question, if codepen ever goes away, is inaccessible, or blocked, then your question loses all value to future visitors. — j08691, Aug 02 '17 at 20:52
Run an analysis of the CSS in your codepen and fix all the errors — Gerard, Aug 02 '17 at 21:00

score 1 · Answer 1 · answered Oct 20 '19 at 13:40

1

I had same problem. Finally I got checkbox visible by adding one property

-moz-appearance:initial

This property natively(platform based) applies it appearance as of OS's theme.

answered Oct 20 '19 at 13:40

Meet Zaveri

2,921
1
22
33

score 0 · Answer 2 · answered Aug 02 '17 at 21:40

If I understand correctly, Firefox ignores :before and :after when the parent element does not render child elements. So, :before and :after don't work for inputs with type=checkbox.

For an alternate approach that should work cross-browser, see: https://stackoverflow.com/a/21863085/542047

Custom CSS Checkbox not working for Mozilla, works every other browser

2 Answers2