如何在文本框中设置清除按钮

　　代码如下

　　HTML代码

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<linkhref="style.css"rel="stylesheet"type="text/css"/>

　　<scripttype="text/javascript"language="javascript">

<!--

　　functionClearButton_Click(){

　　this.searchForm.searchBox.value="";

　　}

　　-->

　　</script>

　　</head>

　　<body>

　　<formaction=""name="searchForm">

　　<divclass="searchFrame">

　　<inputtype="text"id="search"name="searchBox"value=""class="inputBox"/>

　　<divclass="clearButton"onclick="ClearButton_Click()"></div>

　　</div>

　　</form>

　　</body>

　　</html>

　　CSS代码

　　style.css

　　.searchFrame{

　　position:relative;

　　display:inline-block;

　　}

　　.inputBox{

　　padding-right:20px;

　　width:120px;

　　}

　　.searchFrame.clearButton{

　　width:13px;

　　height:13px;

　　position:absolute;

　　right:2px;

　　top:1px;

　　background:url(img/d.jpg)no-repeatleftcenter;

　　cursor:pointer;

　　}

　　说明

　　上述代码中，在文本框周围准备一个“searchFrame”框架。将清除按钮放在“searchFrame”框架的右端。通过设置样式表的正确属性将其放在右端。“searchFrame”框架被指定为“display：inline-block”，它是一个紧紧围绕文本框的框架。

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r56414.shtml