tag



tag




 <h1>Tag Me</h1>
<ul class="tag-box">
  <li class="tags">
    HTML5<a class="close">x</a>
  </li>
  <li class="tags">
    CSS3<a class="close">x</a>
  </li>
  <li class="tags">
    jQuery<a class="close">x</a>
  </li>
    <li class="tags">
    Google<a class="close">x</a>
  </li>
  <li class="tags">
    facebook<a class="close">x</a>
  </li>
  <li class="tags">
    Codepen<a class="close">x</a>
  </li>
  <li class="new-tag">
    <input class="input-tag" type="text">
  </li>
</ul>

<p>Type and press Enter for Tag ;)</p>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>                    
                  
                



 body{padding:15px; margin:0; background:#FBFCFC; font-family:arial;}
h1{color:#EA5D00; text-align:center;}
p{color:#EA5D00}
/*==========================================================================*/
.tag-box{
  list-style:none;
  padding:3px;
  margin:0;
  display:inline-block;
  font-family:arial;
  width:100%;
  border:1px solid #F39F19;
  @include border-radius(4px);
    *{
        @include transition-property(all);
        @include transition-duration(0.3s);
    }
  li{
    padding:3px 5px;
    float:left;
    &.tags{
      background:#F1C617;
      color: #fff;
      @include border-radius(4px);
      margin:3px;
      position:relative;
      .close{
        display: inline-block;
        position: absolute;
        color:#E7832B;
        overflow: hidden;
        width:0;
        right: 0;
        height: 18px;
        cursor: pointer;
        top: 3px;
      }
      &:hover{
        padding-right:18px;
        .close{
          width:14px;
        }
      }
    }
    .input-tag{
      height:24px;
      vertical-align:middle;
      border:none;
      outline:none;
      background:none
      &:hover, &:focus{
        outline:none;
        border:none;
      }
    }
  }
  
}                
              



 $('.input-tag').bind("keydown", function (kp) {
    var tag = $('.input-tag').val();
      if(tag.length > 0){
        // Taging
        if(kp.keyCode  == 13){
          $(".new-tag").before('
  • '+tag+'x
  • '); $(this).val(''); } } else { if(kp.keyCode == 8){ $(".new-tag").prev().remove();} } }); //Delete tag $(".tag-box").on("click", ".close", function() { $(this).parent().remove(); }); $('.tag-box').click(function () { $('.input-tag').focus(); });