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

The accepted answer above is great but this slight tweak to the fiddle from Joeytje50 allows the check-boxes to be tabbed to.

Using opacity 0 instead of display none means the checkbox is still tabbable and hence accessible by keyboard.

Position absolute places the input checkbox top left of the drawn box meaning your formatting stays neat.

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}
input[type="checkbox"] + label {
    text-align:center;
    cursor:pointer;
}
input[type="checkbox"]:focus + label {
    background-color: #ffffd;
}
input[type="checkbox"] + label div {
    display:inline-block;
    line-height: 16px;
    font-size: 12px;
    height: 16px;
    width: 16px;
    margin:-0px 4px 0 0;
    border: 1px solid black;
    color: transparent;
}
input[type="checkbox"]:checked + label div {
    color: black;
}

    
✔
Check Box 1




    
✔
Check Box 2