如何为HTML无序列表创建空心方块/复选框样式列表标记？

Question

我需要在网页上制作项目符号列表,其中标记(项目符号)看起来像空的复选框(基本上是方形的轮廓).我知道您可以通过CSS中的list-style-type属性指定列表标记,但可用的选项(实心圆,空心圆,实心方块等)不是我需要的.

我不需要这些实际上像复选框一样的功能.我只是想让它们成为正方形而不是填充.

谢谢,约翰

Answer 1

您可以使用图片代替 ......除非你需要它的功能就像一个复选框

那么这是一个有趣的小演示: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;
}

要么...

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

我对此感到非常有趣.:P

Answer 2

像这样的东西:

http://jsfiddle.net/WLQqf/

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