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

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計(jì)制作的公司,為廣大用戶提供了成都網(wǎng)站制作、成都網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計(jì)，廣告投放，成都做網(wǎng)站選創(chuàng)新互聯(lián)，貼合企業(yè)需求，高性價(jià)比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

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

我們先來(lái)看一下設(shè)置清除按鈕具體的示例

代碼如下

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;  
}

說(shuō)明

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

運(yùn)行結(jié)果

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

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

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