利用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 相关文章推荐
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 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
使用PHP模拟HTTP认证
2006/10/09 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
python绘制立方体的方法
2018/07/02 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
深入了解Python 变量作用域
2020/07/24 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
开业庆典邀请函
2014/01/08 职场文书
美术国培研修感言
2014/02/12 职场文书
安全生产汇报材料
2014/02/17 职场文书
家长会主持词开场白
2014/03/18 职场文书
英语课外活动总结
2014/08/27 职场文书
污水处理保证书
2015/05/09 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
SpringBoot详解执行过程
2022/07/15 Java/Android