我需要在網(wǎng)頁上制作一個帶標記(項目符號)的項目符號列表，看起來像空復(fù)選框(基本上是一個正方形的輪廓)。我知道您可以通過CSS中的list-style-type屬性來指定列表標記，但是可用的選項(實心圓、空心圓、實心正方形等。)都不是我需要的。

我不需要這些功能實際上像復(fù)選框。我只希望它們是正方形，而不是實心的。

你可以用圖像來代替...除非您需要它像復(fù)選框一樣工作

這里有一個有趣的小演示: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

大概是這樣的:

http://jsfiddle.net/WLQqf/

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

如果您需要它們是透明的、無法檢查的空白方塊:

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

還有一種可能性。我很幸運地使用了列表樣式None，并為空框、復(fù)選標記和其他wingdings等使用HTML代碼。

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

下面預(yù)覽

□第一件事 □另一件事 這里有很多符號的HTML代碼的鏈接。 http://www.danshort.com/HTMLentities/index.php?w=dingb

FileFormat.info是另一個不錯的網(wǎng)站

這個對我有用。您可以在ul的列表樣式類型中指定正方形，如下所示:

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

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

可以用字體——牛逼。比較容易。http://fontawesome.io/icons/類型的廣場，然后用你的列表項目。

你可以用純CSS和HTML做一個復(fù)選框列表，沒有圖片或者框架。我建議使用投票箱或正方形作為復(fù)選框符號。這對于可打印的清單很有用，因為復(fù)選框是不起作用的。請注意，您必須在CSS 'content '中使用十六進制實體，因為命名和十進制實體將不起作用。

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>

這個帖子很久以前就掛了，但我想我應(yīng)該回答一下，以防你像我一樣，最近試圖谷歌一下，但找不到答案。我終于找到了，所以你在這里:

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