如何为 HTML 无序列表创建开放方块/复选框样式列表标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7463391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create open square/checkbox style list marker for HTML unordered list?
提问by johnnyb10
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.
我需要在网页上制作一个带有标记（项目符号）的项目符号列表，这些标记（项目符号）看起来像空复选框（基本上是正方形的轮廓）。我知道您可以通过 CSS 中的 list-style-type 属性指定列表标记，但可用的选项（实心圆、空心圆、实心正方形等）并不是我所需要的。
I don't need these to actually function like checkboxes. I just want them to be squares, not filled in.
我不需要这些实际上像复选框一样起作用。我只希望它们是正方形，而不是填充。
Thanks, John
谢谢，约翰
采纳答案by hunter
Something like this:
像这样的东西：
li
{
list-style-image: url('http://bit.ly/qunMkL');
list-style-position: inside;
}
回答by Joseph Marikle
You can use images instead... unless you need it to functionlike a checkbox
您可以使用图像代替...除非您需要它像复选框一样起作用
Well here's a fun little demo :P
好吧，这是一个有趣的小演示：P
<ul>
<li>one</li>
<li>two</li>
</ul>
li:before
{
content: "10";
margin-right:5px;
}
li:hover:before
{
content: "11";
margin-right:5px;
}
Or...
或者...
I am just having too much fun with this. :P
我只是玩得太开心了。:P
回答by Katie
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>
回答by Workaround_Q
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.
这是另一种可能性。我使用 List Style None 并为空框以及复选标记和其他wingdings等使用HTML代码已经很幸运了。
<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
这是指向许多符号的 HTML 代码的链接。 http://www.danshort.com/HTMLentities/index.php?w=dingb
FileFormat.info 是另一个不错的网站
回答by user3263771
You can use font-awesome. It's easier. http://fontawesome.io/icons/type square and then use that with your list item.
您可以使用 font-awesome。这更容易。http://fontawesome.io/icons/输入 square，然后将其与您的列表项一起使用。
回答by Just Being Helpful
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>
