Home >Web Front-end >CSS Tutorial >How to set clear button in textbox
How to set clear button in textbox
- 不言Original
- 2018-12-04 16:57:525677browse
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.
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>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;
}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
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
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!