1，CSS样式

.clearable{ 
background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center; 
border: 1px solid #999; 
padding: 3px 18px 3px 4px; 
/* Use the same right padding (18) in jQ! */ 
border-radius: 3px; 
transition: background 0.4s; } 
.clearable.x { 
background-position: right 5px center; } 
/* (jQ) Show icon */ 
.clearable.onX{ cursor: pointer; } 
/* (jQ) hover cursor style */ 
.clearable::-ms-clear {display: none; width:0; height:0;} 
/* Remove IE default X */

2，JS

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function tog(v){return v?'addClass':'removeClass';} $(document).on('input', '.clearable', function(){ $(this)[tog(this.value)]('x'); }).on('mousemove', '.x', function( e ){ $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX'); }).on('touchstart click', '.onX', function( ev ){ ev.preventDefault(); $(this).removeClass('x onX').val('').change(); });
</script>

3，html

 <input class="clearable" name="" type="text" value="" placeholder="" />