htmlcssfirefoxcheckbox

-moz-appearance:none still displays a checkbox

I want to create a custom checkbox for the following field:

<label class="cmfchklabel"><input type="checkbox" id="cmf-2" name="cmf[2][value][]" value="true" checked>New Year\'s Eve</label>

The field is populated from a plugin, so I can't alter that basic markup.

I figured out how to update the look of the checkbox in webkit browsers, but Firefox keeps displaying a checkbox, even when I set -moz-appearance:none;.

How can I update the look of my checkbox in Firefox with CSS, without changing my basic markup?

For reference, here's my current CSS for the checkbox:

input[type="checkbox"],input[type="checkbox"]:checked {
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    border:none;
    outline: none;
}

input[type="checkbox"]:checked:before {
    background:#177dc0;
}

input[type="checkbox"]:before {
    content:'';
    background:#361512;
    display:inline-block;
    height:11px;
    width:11px;
    margin-right:1px;
}

Here's my problem in fiddle.

Thanks.

Solution

  • I decided to just use a the "prettyCheckable" jquery plugin. It's a very simple way to update checkboxes.