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

Question

I need to make a bulleted list on a web page with markers (bullets) that look like empty checkboxes (basically, the outline of a square). I know that you can specify the list marker via the list-style-type property in CSS, but the options available (filled circle, open circle, filled square, etc.) are not what I need.

I don't need these to actually function like checkboxes. I just want them to be squares, not filled in.

Thanks, John

Answer 1

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

Answer 2

This one worked for me. You can specify the square in list-style-type of ul like below:

    ul.square-box  {
       list-style-type: "\2610   ";
    }

    <ul class="square-box">
       <li>Lion</li>
       <li>Tiger</li>
       <li>Zebra</li>
    <ul>