johnnyb10 johnnyb10 - 4 months ago 37
CSS Question

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

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

Something like this:

http://jsfiddle.net/WLQqf/

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