怎么利用CSS3實(shí)現(xiàn)文本框的清除按鈕相關(guān)的一些效果
本篇內(nèi)容介紹了“怎么利用CSS3實(shí)現(xiàn)文本框的清除按鈕相關(guān)的一些效果”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
成都創(chuàng)新互聯(lián)是專業(yè)的子長(zhǎng)網(wǎng)站建設(shè)公司，子長(zhǎng)接單;提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行子長(zhǎng)網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
search類型搜索框，設(shè)計(jì)師常常會(huì)設(shè)計(jì)一個(gè)叉叉圖標(biāo)，表示用戶點(diǎn)之久可以清除輸入的內(nèi)容。比方說(shuō)這個(gè)：
這是不錯(cuò)的體驗(yàn)！
當(dāng)前現(xiàn)代瀏覽器中，Chrome瀏覽器下type=search的輸入框會(huì)有清除按鈕的動(dòng)態(tài)呈現(xiàn)，不過(guò)搜索input框尺寸不太好控制(padding無(wú)視)；FireFox瀏覽器貌似任何類型的輸入框都無(wú)動(dòng)于衷；IE10+瀏覽器貌似任何輸入框都會(huì)出現(xiàn)清除按鈕，但是長(zhǎng)得略微粗糙了點(diǎn)，設(shè)計(jì)師同學(xué)接受不了。
貌似不和諧了，咋辦？傳授個(gè)新技能，借助HTML以及CSS，來(lái)模擬清除按鈕可動(dòng)態(tài)呈現(xiàn)的搜索框。
如下CSS：
CSS Code復(fù)制內(nèi)容到剪貼板
.input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
.clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(clear.png);}
.input::-ms-clear { display: none; }
.input:valid + .clear { display: inline; }
如下HTML：
輸入任意內(nèi)容：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
然后就有類似下面截圖的效果了（均截自FireFox瀏覽器）：
手摸為實(shí)，眼觀為虛。您可以狠狠地點(diǎn)擊這里：CSS與文本框上清除按鈕顯隱Demo
實(shí)現(xiàn)原理
HTML部分
因?yàn)閟earch類型文本框在Chrome/Opera/Safari下尺寸不好控制，因此使用缺省的類型(也就是text類型)；
required是必要屬性，配合CSS偽類實(shí)現(xiàn)我們的效果。
CSS部分
使用的是:valid偽類。這是CSS3中新增偽類，IE10+以及其他現(xiàn)代瀏覽器支持，表示表單合法。由于HTML中的有HTML5表單驗(yàn)證屬性required. 于是，如果文本框沒(méi)有內(nèi)容，則不合法；有內(nèi)容，則合法，就會(huì)觸發(fā)這里的:valid偽類選擇器。而這里:valid偽類控制后面的清除按鈕顯示，于是就實(shí)現(xiàn)了我們想要的效果。
啊，對(duì)了。IE11瀏覽器下不是所有的文本框都有黑色的叉叉嗎，會(huì)跟這里的自定義清除按鈕重疊，::-ms-clear { display: none; }這段代碼可以去之~~
更多偽元素改變表單控件默認(rèn)樣式可以參考“偽元素改變表單控件默認(rèn)樣式”一文。
補(bǔ)充于翌日：來(lái)公司用IE11測(cè)了下，沒(méi)效果。后發(fā)現(xiàn)，不是偽類不認(rèn)識(shí)，而是兄弟選擇器的渲染bug. 通過(guò)修改透明度為0→1變化，鼠標(biāo)hover清除按鈕位置，則按鈕出現(xiàn)或隱藏（見(jiàn)下面Gif）。尚未發(fā)現(xiàn)什么奇淫技巧修復(fù)這個(gè)問(wèn)題。
評(píng)論有說(shuō)mac下Chrome瀏覽器無(wú)法清除。經(jīng)自己測(cè)試，可以的。如果意思是點(diǎn)擊關(guān)閉按鈕清除，確實(shí)CSS無(wú)能為力。
實(shí)現(xiàn)的優(yōu)點(diǎn)
此方法相比傳統(tǒng)JS實(shí)現(xiàn)的好處在于，更簡(jiǎn)單了。JS的話還要偵聽(tīng)輸入事件(input)等，比較折騰。CSS的話完全瀏覽器自身事件特性，顯然，高效簡(jiǎn)單的多。
實(shí)現(xiàn)的不足
不足在于，兼容性。IE9-以下的瀏覽器只能點(diǎn)蠟燭了。
不過(guò)，寫寫原型啊，demo；或者漸進(jìn)增強(qiáng)使用；或者移動(dòng)端開發(fā)等，都可以試試這個(gè)新技能。
注意：點(diǎn)擊叉叉是不會(huì)清除的，本文只是輸入控制顯隱??！
“怎么利用CSS3實(shí)現(xiàn)文本框的清除按鈕相關(guān)的一些效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
新聞名稱：怎么利用CSS3實(shí)現(xiàn)文本框的清除按鈕相關(guān)的一些效果
網(wǎng)站URL：http://www.jiaotiyi.com/article/gchdho.html