這篇文章將為大家詳細講解有關在文本框中設置清除按鈕的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營業(yè)務：成都網(wǎng)站設計、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出泊頭免費做網(wǎng)站回饋大家。

有時我們會看到在文本框中的右邊會有一個圓圈里面有個×，這其實就是清除按鈕，那么如何在文本框中來實現(xiàn)這個清除按鈕呢？

我們先來看一下設置清除按鈕具體的示例

代碼如下

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

說明

上述代碼中，在文本框周圍準備一個“searchFrame”框架。將清除按鈕放在“searchFrame”框架的右端。通過設置樣式表的正確屬性將其放在右端?！皊earchFrame”框架被指定為“display：inline-block”，它是一個緊緊圍繞文本框的框架。

運行結(jié)果

在瀏覽器上將顯示如下效果

你可以像普通文本框一樣輸入字母。如果將鼠標指針移到最右側(cè)的[×]圖標上，則指針的形狀會發(fā)生變化，此時單擊將刪除文本框的內(nèi)容，效果如下

關于在文本框中設置清除按鈕的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前名稱：在文本框中設置清除按鈕的方法-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/dighdj.html