先来看看最终效果图吧

输入框效果展示.gif

实现的功能有
1、鼠标覆盖移除的动画效果
2、点击加号添加标签、按下enter添加标签、空值判断
3、点击x删除标签

所需依赖
1、jq(使用cdn)

下面是具体代码

HTML

 <div class="box">
        <input type="text" class="innerIpt">
      <div class="innerBox">
          +
      </div>
    </div>
      <ul id='chooseBox'> </ul>

CSS

    <style>
    body,html{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    li{
      list-style: none
    }
.box{
  width: 200px;
  height: 50px;
  border-radius: 5rem;
  position: relative;
  border: 1px solid #f1aa56;
  margin: 300px 500px 30px;
  
  transition: all .5s linear;
}
.innerBox{
  width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    position: absolute;
    margin-left: 150px;
    text-align: center;
    line-height: 42px;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    transition: all .5s linear;
}
.innerIpt{
  width: calc(100% - 75px);
    position: absolute;
    border: none;
    height: 95%;
    top: 0%;
    left: 20px;
    outline: none;
    font-size: 25px;
    color: #bd5d5d;
}
.box:hover{
  transition: all 0.5s linear;
  width: 300px;
}

.box:hover .innerBox{ 
  transition: all 0.5s linear;
  margin-left: 250px;
  transform: rotate(360deg)
}


ul#chooseBox {
    width: 800px;
    min-height: 100px;
    max-height: auto;
    position: relative;
    /* border: 1px solid #f1aa56; */
    margin: auto;
    transition: all .5s linear;
    padding: 0;
    padding-bottom: 30px;
}#chooseBox li {
  margin: 30px 0 0 30px;
    height: 31px;
    border: 1px solid #e8e8e8;
    /* border-radius: 0.2rem; */
    /* float: left; */
    /* display: inline-block; */
    display: inline-flex;
    padding: 0 15px;
    line-height: 31px;
    color: #656565;
}
.delete{
  color: #999;
    margin-left: 10px;
    line-height: 27px;
    cursor: pointer;
}
</style>

JS

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
  $('.innerIpt').keydown(function(){
    if(event.keyCode === 13){
      $('.innerBox').click()
    }
  })
  $('.innerBox').click(function(){
    let text = $('.innerIpt').val();
    if(text.trim()!=''){
    $('#chooseBox').append('<li>'+text+'<span class="delete">x</span></li>')
    }
  })
      $('body').on('click','#chooseBox li .delete',function(){
    $(this).parent().remove()
    })
</script>

好啦，全部的代码都贴上来啦！

爱心发射biu.gif