replace checkbox with unicode character

Question

I am trying to replace the unchecked checkboxes with the following unicode character: ☐ or ◻

I tried doing this by making the checkboxes' content property the unicode character, but that doesn't seem to be working.

Here is the CSS style that I tried to do the above with:

.question input[type='checkbox']{
    background:none;
    content:◻;
    cursor:pointer;
}

How can I replace the checkbox or hide it and in its place have a unicode character?

Here is a JSFiddle where I am trying to do this: http://jsfiddle.net/mNsAv/

Answer 1

Example with :before

http://jsfiddle.net/mNsAv/2/

.question input[type='checkbox'] + label:before {
    content:"◻";
}
.question input[type='checkbox']:checked + label:before {
    content:"✓";
}
.question input[type='checkbox'] {
    display:none;
}