Question

I have the following:

.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();
});

Instead of having the user click on “A” or “B” I would like the user to click on a
colored square and I would like each colored square to have maybe 2px spacing.

Is there an easy way that I could achieve this so that just colored squares appeared instead of A and B ?

Answer 1

You could use this character: ■

It’s U+25A0.