有時候我們會看到在文字方塊中的右邊會有一個圓圈裡面有個×，這其實就是清除按鈕，那麼如何在文字方塊中來實現這個清除按鈕呢？接下來的這篇文章就來跟大家介紹在文字方塊中設定清除按鈕的方法。
我們先來看看設定清除按鈕具體的範例
#程式碼如下
##HTML程式碼
<!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>.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;
}運行結果
在瀏覽器上將顯示如下效果
CSS影片教學欄位進一步學習！ ！ ！
以上是如何在文字方塊中設定清除按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！
