原文地址：http://www.zhangxinxu.com/wordpress/?p=4077
當(dāng)前現(xiàn)代瀏覽器中产园，Chrome瀏覽器下type=search的輸入框會有清除按鈕的動態(tài)呈現(xiàn)，不過搜索input框尺寸不太好控制(padding無視)马绝；FireFox瀏覽器貌似任何類型的輸入框都無動于衷鞠值；IE10+瀏覽器貌似任何輸入框都會出現(xiàn)清除按鈕附鸽，但是長得略微粗糙了點峰锁，設(shè)計師同學(xué)接受不了诽俯。
貌似不和諧了，咋辦呛占？傳授個新技能，借助HTML以及CSS懦趋，來模擬清除按鈕可動態(tài)呈現(xiàn)的搜索框晾虑。
如下CSS：
.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)容：
<input class="input" required><a class="clear"></a>
實現(xiàn)原理
1、HTML部分因為search
類型文本框在Chrome/Opera/Safari下尺寸不好控制仅叫，因此使用缺省的類型(也就是text類型)帜篇；required是必要屬性，配合CSS偽類實現(xiàn)我們的效果诫咱。
2笙隙、CSS部分使用的是:valid
偽類。這是CSS3中新增偽類坎缭，IE10+以及其他現(xiàn)代瀏覽器支持竟痰，表示表單合法。由于HTML中的<input>有HTML5表單驗證屬性required. 于是掏呼，如果文本框沒有內(nèi)容坏快，則不合法；有內(nèi)容憎夷，則合法莽鸿，就會觸發(fā)這里的:valid偽類選擇器。而這里:valid偽類控制后面的清除按鈕顯示拾给，于是就實現(xiàn)了我們想要的效果祥得。
啊，對了蒋得。IE11瀏覽器下不是所有的文本框都有黑色的叉叉嗎级及，會跟這里的自定義清除按鈕重疊，::-ms-clear { display: none; }
這段代碼可以去之~~ （其實额衙，不是偽類不認識创千，而是兄弟選擇器的渲染bug. 通過修改透明度為0→1變化缰雇，鼠標(biāo)hover清除按鈕位置，則按鈕出現(xiàn)或隱藏追驴。尚未發(fā)現(xiàn)什么奇淫技巧修復(fù)這個問題械哟。）
更多偽元素改變表單控件默認樣式可以參考“偽元素改變表單控件默認樣式”一文。
實現(xiàn)的優(yōu)點
此方法相比傳統(tǒng)JS實現(xiàn)的好處在于殿雪，更簡單了暇咆。JS的話還要偵聽輸入事件(input
)等，比較折騰丙曙。CSS的話完全瀏覽器自身事件特性爸业，顯然，高效簡單的多亏镰。
實現(xiàn)的不足
不足在于扯旷，兼容性。IE9-以下的瀏覽器只能點蠟燭了索抓。
不過钧忽，寫寫原型啊，demo逼肯；或者漸進增強使用耸黑；或者移動端開發(fā)等，都可以試試這個新技能篮幢。
