How to set clear button in textbox-CSS Tutorial-php.cn

How to set clear button in textbox

不言

Release： 2018-12-04 17:05:54

Original

5656 people have browsed it

Sometimes we will see a circle with an × in it on the right side of the text box. This is actually the clear button. So how to implement this clear button in the text box? The following article will introduce to you how to set a clear button in a text box.

How to set clear button in textbox

Let’s first look at a specific example of setting the clear button

The code is as follows

HTML code

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
<!--
 function ClearButton_Click(){
  this.searchForm.searchBox.value="";
 }
-->
</script>
</head>
<body>
  <form action="" name="searchForm">
  <div class="searchFrame">
  <input type="text" id="search" name="searchBox" value="" class="inputBox"/>
  <div class="clearButton" onclick="ClearButton_Click()"></div>
  </div>
  </form> 
</body>
</html>

Copy after login

CSS code

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-repeat left center;
  cursor: pointer;  
}

Copy after login

Description

In the above code, prepare a "searchFrame" frame around the text box. Place the clear button at the right end of the "searchFrame" frame. Place it on the right end of the stylesheet by setting the correct properties. The "searchFrame" frame is specified as "display:inline-block" and is a frame that tightly surrounds the text box.

The running result

The following effect will be displayed on the browser

How to set clear button in textbox

You can use it like a normal text box Enter letters. If you move the mouse pointer to the [×] icon on the far right, the shape of the pointer will change. At this time, clicking will delete the content of the text box. The effect is as follows

How to set clear button in textbox

This article ends here. For more related exciting content, you can go to the CSS Video Tutorial column of the php Chinese website for further study! ! !

The above is the detailed content of How to set clear button in textbox. For more information, please follow other related articles on the PHP Chinese website!