前端 如何利用css3 特性 让 input 输入框有个叉叉x 能够删除整个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"，表示必须）；

 +号 是兄弟选择器，.name-input:valid + .clear-input {display: block;}； 代表类名name-input 符合要求（required="required" 表示不为空，必须）时，兄弟元素.clear-input 显示  也就是输入框内有文字则x显示  否则不显示， 注意是相邻的兄弟元素，如果隔了一个是无效的

“clear-input”要先隐藏，这个隐藏不要写在行内样式上，否则无用。  

注意： 有兼容性问题，移动端放心用