使用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就要显示出来。

是不是很简单~~

使用CSS3 实现input框旁边的清空input内容按钮的显隐

推荐阅读