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

input框旁边的清空input按钮，我们一般在制作注册以及登录页面的时候会用到。一般的样子是这个样子滴：

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

是不是很简单~~