Facebook Style Tag Selector using jQuery & CSS3

Last modified on by Karthikeyan K

Today I am going to tell you how to create Facebook Style Tag Selector using jQuery. This kind of tag selectors are used in many popular sites like facebook, twitter, linkedIn & even in gmail also.

In my previous article I had explained how to design css3 tags . If you want to add tags separated by comma, I am sure that this tutorial will help you a lot.

In many social networking sites this kind of Tag text boxes are used to collect user’s Interest, adding categories, adding skills, adding tags etc


Facebook Style Tag Selector using jQuery & CSS

jQuery Code

$(document).on('keydown', '#tag_list', function (e) {
if (e.keyCode == 13) {
$(document).on('click', '.delete', function () {

function createTag(text) {
if (text != '') {
var tag = $('<div class="tags">' + text + '<a class="delete"></a></div>');
tag.insertBefore($('#tag_list'), $('#tag_list'));

Keycode – 13 is for Enter Key. Once user pressed the enter key, createTag function will called with typed text.

Delete button is used to delete the added text

CSS Code

.tags {
float: left;
margin-right: 2px;
margin-bottom: 7px;
height: 22px;
border-radius: 4px;
border: 1px solid #cccccc;
font: normal 14px/20px 'Sanchez';
background: #ebeaea;
background: -o-linear-gradient(top, #C4CDE0, #C4CDE0);
background: -webkit-linear-gradient(top, #C4CDE0, #C4CDE0);
background: -moz-linear-gradient(top, #C4CDE0, #C4CDE0);
background: -ms-linear-gradient(top, #C4CDE0, #C4CDE0);
background: linear-gradient(top, #C4CDE0, #C4CDE0);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#C4CDE0", endColorStr="#C4CDE0");
border-color: #cccccc;
cursor: pointer;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
padding-left: 6px;
padding-right: 28px;
position: relative;
.tags .delete {
display: block;
width: 20px;
height: inherit;
float: right;
background: rgba(255, 255, 255, 0.5) url('delete.png') center no-repeat;
margin-left: 6px;
border-left: 1px solid #ccc;
position: absolute;
top: 0;
right: 0;
.text {
height: 30px;
border-radius: 2px;
border: 1px solid #e9e8e8;
box-sizing: border-box;
-moz-box-sizing: border-box;
margin-bottom: 20px;
width: 95%;
background: #fff;
.text input {
border: 0;
background: none;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 5 5px;
margin-top: 3px;
font: 400 14px/18px 'Sanchez';
.text input:active {
.text input {
width: 200px;
overflow: hidden;


<div class="text">
<input type="text" placeholder="Type & Enter" id="tag_list"/>

Please don’t forget to share and subscribe to latest updates of the blog.


View Live Demo & Download

You May Also Like

3 Responses

  1. Neo says:

    Its not working

  2. Small improvement: Join it with Autocomplete (add only non existing tags) and it will be GREAT

Leave a Reply

Your email address will not be published. Required fields are marked *