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.
Best Answer
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
Something like this:
http://jsfiddle.net/WLQqf/
li { list-style-image: url('http://bit.ly/qunMkL'); list-style-position: inside;}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>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>□ The first thing<li>□ Another thing </ul> preview below
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
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>You can use font-awesome. It's easier. http://fontawesome.io/icons/ type square and then use that with your list item.
You can make a checkbox list with pure CSS and HTML, no images or frameworks. I recommend to use ballot boxes or squares as the checkbox symbol. This is useful for printable checklists, since the checkboxes are non-functional. Note that you must use hexadecimal entities in the CSS 'content', since named and decimal entities will not work.
ul { list-style-type: none; }li::before { content: "\2610"; margin-right: 0.5em; }<ul><li>use hexadecimal entities in content</li><li>use the ballot box symbol</li><li>and apply a right-margin</li></ul>This thread was dead a very long time ago, but I thought I'd answer it just in case you were like me and tried to google it more recently, but couldn't find the answer. I finally found it so 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>