html隐藏搜索框的字体,JS实现搜索框文字可删除功能

JS实现搜索框文字可删除

*:focus {outline: none; }

body {width: 400px;margin: 100px auto;}

#topsearch {height: 33px;}

#topsearch .input {border: 1px solid #77c03a;height: 100%;}

#topsearch .input .clear {width: 30px;height: 35px;line-height: 30px;text-align: center;padding-right: 10px;visibility: hidden;opacity: 0.8;color: gray;}

#topsearch input[type=text] {height:20px;width: 250px;border: none;padding: 5px;}

#topsearch div {float: left;}

#topsearch button {width: 100px;height: 35px;background: #77c03a;color: #fff;border: none;}

×

Search

document.getElementById("search").addEventListener("keyup", function() {

if (this.value.length > 0) {

document.getElementById("delete").style.visibility = "visible";

document.getElementById("delete").onclick = function() {

document.getElementById("search").value = "";

}

} else {

document.getElementById("delete").style.visibility = "hidden";

}

});