Question

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

我不需要这些功能就像复选框一样。我只是希望它们是正方形，而不是填充。

谢谢，约翰

Answer 1

您可以use images instead ...除非您需要功能，如复选框

这是一个有趣的小演示：P

<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;
}

Answer 3

如果您需要它们透明，则无法检查空白方块：

<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

这是另一种可能性。我很幸运使用List Style None并使用HTML代码表示空框以及复选标记和其他翼形等。

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

预览

□第一件事

□另一件事

以下是许多符号的HTML代码链接。 http://www.danshort.com/HTMLentities/index.php?w=dingb

FileFormat.info是另一个好网站

Answer 5

你可以使用font-awesome。这比较容易。 http://fontawesome.io/icons/输入square，然后将其与列表项一起使用。

Answer 6

您可以使用纯CSS和HTML制作复选框列表，而不使用图像或框架。我建议使用ballot boxes或squares作为复选框符号。这对于可打印的清单很有用，因为这些复选框无法使用。请注意，您必须在CSS“内容”中使用十六进制实体，因为命名实体和十进制实体将不起作用。

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>

Answer 7

这个对我有用。您可以在 list-style-type 的 ul 中指定正方形，如下所示：

    ul.square-box  {
       list-style-type: "\2610   ";
    }

    <ul class="square-box">
       <li>Lion</li>
       <li>Tiger</li>
       <li>Zebra</li>
    <ul>

Answer 8

这个线程很久以前就死了，但是我想我会回答这个问题，以防万一你和我一样，并试图在最近的Google上搜索它，但是找不到答案。我终于找到了，所以你在这里：

let journal = [];

function addEntry(events) {
  events.forEach(event => journal.push(event));
}

let events = [
    {
        events: ["work", "ice cream", "cauliflower",
          "lasagna", "touched tree", "brushed teeth"
        ],
        squirrel: false,
    },
    {
        events: ["weekend", "cycling", "break", "peanuts",
          "soda"
        ],
        squirrel: true
    }
]

addEntry(events);
console.log(journal);

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

8 个答案: