使⽤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">
onpaste不能用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就要显⽰出来。
是不是很简单~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。