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

2024-01-17 15:40 小编
代码如下
 
  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”,它是一个紧紧围绕文本框的框架。


Tag: 如何
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码