我可以使用彩色方块作为链接而不是使用CSS的文本吗？

Question

我有以下内容：

.style-switcher {overflow: auto;margin: 0;padding: 0;}
.style-switcher > li {float: left;list-style-type: none;width: 1em;}
.style-switcher > li > a {display: block;width: 1em;}

<ul class="style-switcher">
   <li><a href="#" data-style="humanity">A</a></li>
   <li><a href="#" data-style="vader">B</a></li>
</ul>

$(".style-switcher").on('click', 'a', function(e) {
    var style = $(this).attr('data-style');
    changeStyle('/Content/Themes-jQuery/' + style + '/jquery-ui-1.8.17.custom.css');
    e.preventDefault();
});

我希望用户点击a，而不是让用户点击“A”或“B” 彩色方块，我希望每个彩色方块的间距可能为2px。

有没有一种简单的方法可以实现这一点，只显示彩色方块而不是A和B？

Answer 1

您可以使用此字符：■

这是U + 25A0。

Answer 2

您可以使用图像，也可以使用所需的背景颜色创建2x2 div。

Answer 3

我使用以下样式

.buttonlink
{
    text-decoration: none;
    color: white;
    background-color: green;
    width: 10px;
    height: 10px;
    display: inline-block;
    padding: 5px;
    /*border: 4px outset yellow;*/
}