Style a checkbox in firefox — remove check and border

Question

How do I style a checkbox in firefox, and have the checkmark and border disappear?

http://jsfiddle.net/moneylotion/qZvtY/

CSS:

Answer 1

A cleaner solution IMHO that uses pure css to redraw the elements.

Codepen

                input[type="checkbox"] {
            opacity: 0;
            position: absolute;
        }

        input[type="checkbox"] ~ label:before {
          content: '';
          display: inline-block;
          cursor: pointer;
          ...
          border: 3px solid #999;
          border-radius: 2px;
          transition: .3s;
        }

        input[type="checkbox"]:checked ~ label:before {
          background: #333;
        }