利用CSS3实现文本框的清除按钮相关的一些效果
17 浏览量
2020-09-25
00:44:09
上传
评论
收藏 81KB PDF 举报
利用利用CSS3实现文本框的清除按钮相关的一些效果实现文本框的清除按钮相关的一些效果
主要介绍了利用CSS3实现文本框的清除按钮相关的一些效果,主要是针对输入时的隐藏与显示效果的讲解,需要
的朋友可以参考下
新技能传授-哔哔哔哔
search类型搜索框，设计师常常会设计一个叉叉图标，表示用户点之久可以清除输入的内容。比方说这个：
这是不错的体验！
当前现代浏览器中，Chrome浏览器下type=search的输入框会有清除按钮的动态呈现，不过搜索input框尺寸不太好控制
(padding无视)；FireFox浏览器貌似任何类型的输入框都无动于衷；IE10+浏览器貌似任何输入框都会出现清除按钮，但是长
得略微粗糙了点，设计师同学接受不了。
貌似不和谐了，咋办？传授个新技能，借助HTML以及CSS，来模拟清除按钮可动态呈现的搜索框。
如下CSS：
CSS Code复制内容到剪贴板
1. .input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
2. .clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(clear.png);}
3. .input::-ms-clear { display: none; }
4. .input:valid + .clear { display: inline; }
如下HTML：
输入任意内容：
XML/HTML Code复制内容到剪贴板
1. <input class="input" required><a class="clear"></a>
然后就有类似下面截图的效果了（均截自FireFox浏览器）：
手摸为实，眼观为虚。您可以狠狠地点击这里：CSS与文本框上清除按钮显隐Demo
实现原理实现原理
HTML部分部分
因为search类型文本框在Chrome/Opera/Safari下尺寸不好控制，因此使用缺省的类型(也就是text类型)；
required是必要属性，配合CSS伪类实现我们的效果。
CSS部分部分
使用的是:valid伪类。这是CSS3中新增伪类，IE10+以及其他现代浏览器支持，表示表单合法。由于HTML中的<input>有
评论0
最新资源