How to replace default html checkbox with just html+css and no images?

I would like to visually replace the default checkbox element with a styled div that appears on top of the checkbox. I don't want to use an image.

When checked:

<div style="width: 18px; height: 18px; background: #0e0; border-radius: 3px; border: 2px solid #555; color: #fff;">&check;</div>

When unchecked:

<div style="width: 18px; height: 18px; background: #ccc; border-radius: 3px; border: 2px solid #555; color: #fff;"></div>

Can it be done?

Thanks!