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就要显示出来。
然后用js设置点击事件，清空input文本框。$('.name-input').val("");
标签: css样式
