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

Question

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

I do not need these functions to function as checkboxes. I just want them to be squares, not filled.

Thanks, John

Answer 1

Something like that:

http://jsfiddle.net/WLQqf/

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

Answer 2

You can use images instead ... if you don't need a 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'm just too much into it .: P

Answer 3

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> 

Answer 4

Here is another opportunity. I got lucky using the None list style and using the HTML code for empty boxes, as well as using checkmarks and other wings, etc.

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

Preview below

□ First thing □ One more thing

Here is a link to the HTML code for a lot of characters. http://www.danshort.com/HTMLentities/index.php?w=dingb

FileFormat.info - Another Good Website

Answer 5

You can use font-awesome. It is easier. http://fontawesome.io/icons/ enter a square and then use it with your list item.

Answer 6

This thread has been lost for a long time, but I thought I would answer it, in case you become like me and try to google it recently, but could not find the answer. I finally found it like this, here you are:

 <ul style="list-style-type:myanmar;"> <li>la</li> <li>la</li> <li>la</li> <li>la</li> <li>la</li> <li>la</li> </ul>