CSS動態實現文本框清除按鈕的隱藏與顯示

當前現代瀏覽器中，Chrome瀏覽器下type=search的輸入框會有清除按鈕的動態呈現，不過搜索input框尺寸不太好控制(padding無視)；FireFox瀏覽器貌似任何類型的輸入框都無動於衷；IE10+瀏覽器貌似任何輸入框都會出現清除按鈕，可是長得略微粗糙了點，設計師同窗接受不了。

藉助HTML以及CSS，來模擬清除按鈕可動態呈現的搜索框

以下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：

輸入任意內容：<input class="input" required><a class="clear"></a>

　　

而後就有相似下面截圖的效果了（均截自FireFox瀏覽器）：

 

實現原理

 

HTML部分：

由於search類型文本框在Chrome/Opera/Safari下尺寸很差控制，所以使用缺省的類型(也就是text類型)；
required是必要屬性，配合CSS僞類實現咱們的效果。

CSS部分：

使用的是:valid僞類。這是CSS3中新增僞類，IE10+以及其餘現代瀏覽器支持，表示表單合法。因爲HTML中的<input>有HTML5表單驗證屬性required. 因而，若是文本框沒有內容，則不合法；有內容，則合法，就會觸發這裏的:valid僞類選擇器。而這裏:valid僞類控制後面的清除按鈕顯示，因而就實現了咱們想要的效果。

啊，對了。IE11瀏覽器下不是全部的文本框都有黑色的叉叉嗎，會跟這裏的自定義清除按鈕重疊，::-ms-clear { display: none; }這段代碼能夠去之~~

實現的優勢
此方法相比傳統JS實現的好處在於，更簡單了。JS的話還要偵聽輸入事件(input)等，比較折騰。CSS的話徹底瀏覽器自身事件特性，顯然，高效簡單的多。

實現的不足
不足在於，兼容性。IE9-如下的瀏覽器只能點蠟燭了。

 

注意：點擊叉叉是不會清除的，本文只是輸入控制顯隱！！