html+css+js实现input标签输入控件可以删除特效

1、新建html文档。

2、书写hmtl代码。<div id="wrapper" >    <input style="width:300px;" id="inputTagator" name="inputTagator" value="Test,Best,Rest"></div>

3、书写css代码。.tagator * { box-sizing: border-box; -moz-box-sizing: border-box; text-decoration: none; }#tagator_dimmer { background-color: rgba(0,0,0,.1); width: 100%; height: 100%; position: fixed; z-index: 100; }.tagator { border: 1px solid #abadb3; border-radius: 3px; box-sizing: border-box; background-color: #fff; display: inline-block; text-decoration: none; }.tagator.options-visible { position: relative; z-index: 101; }.tagator_tags { display: inline; }.tagator_tag { display: inline-block; background-color: #39f; border-radius: 2px; color: #fff; padding: 2px 20px 2px 4px; font-size: 13px; margin: 2px; position: relative; vertical-align: top; }.tagator_tag_remove { display: inline-block; font-weight: bold; color: #fff; margin: 0 0 0 5px; padding: 6px 5px 4px 5px; cursor: pointer; font-size: 11px; line-height: 10px; vertical-align: top; border-radius: 0 2px 2px 0; position: absolute; right: 0; top: 0; bottom: 0; }.tagator_tag_remove:hover { color: #000; background-color: #8cf; }.tagator_input, .tagator_textlength { border: 0; display: inline-block; margin: 0; background-color: transparent; font-size: 13px; outline: none; padding: 4px 0 0 5px; }.tagator_options { margin: 0; padding: 0; border: 1px solid #7f9db9; border-radius: 0 0 3px 3px; font-family: sans-serif; position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; z-index: 101; background-color: #fff; overflow: auto; max-height: 250px; list-style: none; left: -1px; right: -1px; }.tagator.options-hidden .tagator_options { display: none; }.tagator_option { padding: 5px; cursor: pointer; color: #000; }.tagator_option.active { background-color: #39f; color: #fff; }

4、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script src="js/fm.tagator.jquery.js"></script><script>$(function () {    $('#inputTagator').tagator({        autocomplete: ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth', '标签']    });});</script>

5、代码整体结构。

6、查看效果。