Custom Tags

customTags

HTML

<div class="addTags">
<h3>Type some text and press enter</h3>

<ul class="addTag">
	<li>Some Tag <i class="close">x</i></li>
</ul>
</div>

CSS

*{margin:0;padding:0}
input{border:1px solid #a0bad9;background:#fff;border-radius:4px;width:100%;color:#64767f;font-size:13px;line-height:14px;margin:0;padding:12px 15px;font-family:'Roboto',sans-serif}
.addTags{width:500px;margin:0 auto;padding:80px 0}
.addTags input{margin-bottom:40px}
.addTags h3{margin-bottom:15px}
.addTags ul{font-size:0}
.addTags ul li{display:inline-block;font-size:14px;border:1px solid #cdcdcd;padding:5px 25px 5px 10px;border-radius:25px;background:#fff;cursor:pointer;margin-right:4px;margin-bottom:10px;position:relative;transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out}
.addTags ul li .close{font-size:12px;font-style:normal;font-weight:700;display:inline-block;vertical-align:middle;height:15px;position:absolute;right:10px;top:0;bottom:0;margin:auto}
.addTags ul li:hover{background:#a0bad9;color:#000}

Jquery

$("input").keyup(function(e) {
  var $this = $(this);
  if ($this.val() !== '' &amp;&amp; e.which == 13) {
    var appendit = '
	<li>' + $this.val() + '<i class="close">x</i></li>
';
    $('.addTag').prepend(appendit);
    $this.val('');
  }
});

$('body').on('click', '.close', function() {
  $(this).closest('li').remove();
});

Live Demo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s