How to create open square/checkbox style list marker for HTML unordered list?

If you need them to be transparent, empty squares that cannot be checked:

<style type="text/css">
input[type='checkbox'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    background:transparent;
    border:1px solid black;
}

input[type='checkbox']:checked {
    background: transparent; /* stay transparent, even after checked */
}
</style>

You can use images instead... unless you need it to function like a checkbox

Well here's a fun little demo :P

http://jsfiddle.net/nN8k7/

<ul>
  <li>one</li>
  <li>two</li>
</ul>

li:before
{
    content: "\2610";
    margin-right:5px;
}

li:hover:before
{
    content: "\2611";
    margin-right:5px;
}

Or...

http://jsfiddle.net/nN8k7/1/

I am just having too much fun with this. :P

Here's another possibility. I've had good luck using the List Style None and using HTML code for the empty boxes as well as checkmarks and other wingdings etc.

<ul style="list-style-type:none;">
  <li>&#9633; The first thing
  <li>&#9633; Another thing  </ul>  

preview below

□ The first thing

□ Another thing

Here's a link to HTML code for lots of symbols. http://www.danshort.com/HTMLentities/index.php?w=dingb

FileFormat.info is another good site

Something like this:

http://jsfiddle.net/WLQqf/

li 
{ 
    list-style-image: url('http://bit.ly/qunMkL'); 
    list-style-position: inside;
}