新技能傳授-嗶嗶嗶嗶
search類型搜索框，設計師常常會設計一個叉叉圖標，表示用戶點之久可以清除輸入的內容。比方說這個：
這是不錯的體驗！
當前現代瀏覽器中，Chrome瀏覽器下type=search的輸入框會有清除按鈕的動態呈現，不過搜索input框尺寸不太好控制(padding無視)；FireFox瀏覽器貌似任何類型的輸入框都無動于衷；IE10+瀏覽器貌似任何輸入框都會出現清除按鈕，但是長得略微粗糙了點，設計師同學接受不了。
貌似不和諧了，咋辦？傳授個新技能，借助HTML以及CSS，來模擬清除按鈕可動態呈現的搜索框。
如下CSS：
如下HTML：
輸入任意內容：
然后就有類似下面截圖的效果了（均截自FireFox瀏覽器）：
手摸為實，眼觀為虛。您可以狠狠地點擊這里：CSS與文本框上清除按鈕顯隱Demo
實現原理
HTML部分
因為search類型文本框在Chrome/Opera/Safari下尺寸不好控制，因此使用缺省的類型(也就是text類型)；
required是必要屬性，配合CSS偽類實現我們的效果。
CSS部分
使用的是:valid偽類。這是CSS3中新增偽類，IE10+以及其他現代瀏覽器支持，表示表單合法。由于HTML中的<input>有HTML5表單驗證屬性required. 于是，如果文本框沒有內容，則不合法；有內容，則合法，就會觸發這里的:valid偽類選擇器。而這里:valid偽類控制后面的清除按鈕顯示，于是就實現了我們想要的效果。
新聞熱點
疑難解答
