使用CSS3 實現input框旁邊的清空input內容按鈕的顯隱

input框旁邊的清空input按鈕，我們一般在制作注冊以及登錄頁面的時候會用到。一般的樣子是這個樣子滴：

 =》

我們要實現的功能是，在輸入的時候，右側的清空按鈕顯示出來，然后當刪除input中的內容的時候，清空按鈕也消失。

以前實現的時候，我用的是“keyup”事件。某一次在做觸屏版的時候，不知怎么搞的就是觸發不了事件，於是像一位牛人請教，get到了這個新技能：

首先看下這個布局的HTML：

<div class="input-box">
     <input required="required" type="text" class="name-input" placeholder="請輸入昵稱" />
     <a href="javascript:;" class="clear-input">
       <img src="images/icon-clear.png" class="clear-input-img" alt="" />
    </a>
</div>

實現這個功能很簡單，出去基本的樣式之外，再加上這樣的樣式就ＯＫ啦：

.name-input:valid + .clear-input {display: block;}

來解讀一下~~

在Input后面放個清除的按鈕；

:valid 選擇器在表單元素的值需要根據指定條件驗證時設置指定樣式（這里要記得在input里面加上required="required"，表示必須）；

 +號的意思是input后面那個css樣式名；

“clear-input”要先隱藏，這個隱藏不要寫在行內。

這句話的意思就是：當name-input框內有文字的時候，clear-inout就要顯示出來。

 

是不是很簡單~~