利用CSS3实现文本框的清除按钮相关的一些效果


Posted in HTML / CSS onJune 23, 2015

新技能传授-哔哔哔哔

search类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。比方说这个:
利用CSS3实现文本框的清除按钮相关的一些效果

这是不错的体验!

当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。

貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框。

如下CSS:

CSS Code复制内容到剪贴板
  1. .input { padding5pxmargin: 0; border1px solid #beceeb; }   
  2. .clear { displaynonepositionabsolutewidth16pxheight16pxmargin6px 0 0 -20pxbackgroundurl(clear.png);}   
  3. .input::-ms-clear { displaynone; }   
  4. .input:valid + .clear { displayinline; }  

如下HTML:

输入任意内容:

XML/HTML Code复制内容到剪贴板
  1. <input class="input" required><a class="clear"></a>  

然后就有类似下面截图的效果了(均截自FireFox浏览器):
利用CSS3实现文本框的清除按钮相关的一些效果

利用CSS3实现文本框的清除按钮相关的一些效果

手摸为实,眼观为虚。您可以狠狠地点击这里:CSS与文本框上清除按钮显隐Demo

实现原理   

    HTML部分
    因为search类型文本框在Chrome/Opera/Safari下尺寸不好控制,因此使用缺省的类型(也就是text类型);
    required是必要属性,配合CSS伪类实现我们的效果。
    CSS部分
    使用的是:valid伪类。这是CSS3中新增伪类,IE10+以及其他现代浏览器支持,表示表单合法。由于HTML中的<input>有HTML5表单验证属性required. 于是,如果文本框没有内容,则不合法;有内容,则合法,就会触发这里的:valid伪类选择器。而这里:valid伪类控制后面的清除按钮显示,于是就实现了我们想要的效果。

    啊,对了。IE11浏览器下不是所有的文本框都有黑色的叉叉吗,会跟这里的自定义清除按钮重叠,::-ms-clear { display: none; }这段代码可以去之~~

    更多伪元素改变表单控件默认样式可以参考“伪元素改变表单控件默认样式”一文。

补充于翌日:来公司用IE11测了下,没效果。后发现,不是伪类不认识,而是兄弟选择器的渲染bug. 通过修改透明度为0→1变化,鼠标hover清除按钮位置,则按钮出现或隐藏(见下面Gif)。尚未发现什么奇淫技巧修复这个问题。
利用CSS3实现文本框的清除按钮相关的一些效果

评论有说mac下Chrome浏览器无法清除。经自己测试,可以的。如果意思是点击关闭按钮清除,确实CSS无能为力。

实现的优点
此方法相比传统JS实现的好处在于,更简单了。JS的话还要侦听输入事件(input)等,比较折腾。CSS的话完全浏览器自身事件特性,显然,高效简单的多。

实现的不足
不足在于,兼容性。IE9-以下的浏览器只能点蜡烛了。

不过,写写原型啊,demo;或者渐进增强使用;或者移动端开发等,都可以试试这个新技能。

注意:点击叉叉是不会清除的,本文只是输入控制显隐!!

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 #HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 #HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 #HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 #HTML / CSS
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
深入了解php4(1)--回到未来
2006/10/09 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
javascript 学习笔记(onchange等)
2010/11/14 Javascript
jquery选择器使用详解
2014/04/08 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
js实现随机8位验证码
2020/07/24 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python实现随机加减法生成器
2020/02/24 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python 图片处理库exifread详解
2021/02/25 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
Michael Kors香港官网:美国奢侈品品牌
2019/12/26 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
音乐教师求职信
2014/06/28 职场文书
校友会致辞
2015/07/30 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python