Question

I am building a website which involves user comments and tags.

I wish to implement tags as they appear on the StackOverflow’s Tags textbox after every question.

I am not able to figure out how to style a cross symbol after every tag and have a background for text inside the textbox as it’s done on StackOverflow.

How can this be done?

Answer 1

As @Rikudo has already shown, a larger image which contains all the required images is used, along with some CSS to display only the required parts. This is the HTML used to display each tag:

<span class="post-tag">
    "the-tag"
    <span class="delete-tag" onmouseover="$(this).attr('class', 'delete-tag-hover')" onmouseout="$(this).attr('class', 'delete-tag')" title="remove this tag"></span>
</span>

The relevant CSS rules applied to class delete-tag:

background-image: url(img/sprites.png);
background-position: 0px -690px;
width: 14px;
height: 14px;
display: inline-block;