html输入框重置,html给文本输入框添加自定义的清除按钮

使用HTML 5，如果对清除按钮的样式不介意的话，可以使用search类型的输入框，它会提供一个默认的清除按钮

如果想自定义清除按钮，则需要自己实现，这里使用jquery给出一个实现的方案：html>

Clear Input Demo

$(document).ready(function() {

$('input.clearable').wrap('')

.after($('')

.click(function() {

$(this).prev('input').val('').trigger('change').focus();

}));

});

span.clear-box {

position: relative;

}

span.clear-box span {

position: absolute;

display: block;

top: 4px;

right: 0px;

width: 18px;

height: 18px;

color: #fff;

background: #999;

cursor: pointer;

}

span.clear-box span:after{

position: absolute;

top: 1px;

right: 2px;

content: "\274c";

font-size: .8em;

}

span.clear-box input {

padding-right: 16px;

box-sizing: border-box;

}