小tip: CSS动态实现文本框清除按钮的隐藏与显示
一、新技能传授-哔哔哔哔
见此图犹如见到神教主,还不跪下膜拜~~
二、新技能传授-哔哔哔哔
search
类型搜索框,设计师常常会设计一个叉叉图标,表示用户点之久可以清除输入的内容。比方说这个:
这是不错的体验!
当前现代浏览器中,Chrome浏览器下type=search
的输入框会有清除按钮的动态呈现,不过搜索input
框尺寸不太好控制(padding
无视);FireFox浏览器貌似任何类型的输入框都无动于衷;IE10+浏览器貌似任何输入框都会出现清除按钮,但是长得略微粗糙了点,设计师同学接受不了。
貌似不和谐了,咋办?传授个新技能,借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框。
如下CSS:
.input {
padding: 5px;
margin: 0;
border: 1px solid #beceeb;
}
.clear {
display: none;
posITion: absolute;
width: 16px;
height: 16px;
margin: 6px 0 0 -20px;
background: url(clear.png);
}
.input::-ms-clear {
display: none;
}
.input:valid + .clear {
display: inline;
}
如下HTML:
输入任意内容: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>
有HTML5表单验证属性required
. 于是,如果文本框没有内容,则不合法;有内容,则合法,就会触发这里的:valid
伪类选择器。而这里:valid
伪类控制后面的清除按钮显示,于是就实现了我们想要的效果。啊,对了。IE11浏览器下不是所有的文本框都有黑色的叉叉吗,会跟这里的自定义清除按钮重叠,
::-ms-clear { display: none; }
这段代码可以去之~~更多伪元素改变表单控件默认样式可以参考“伪元素改变表单控件默认样式”一文。
补充于翌日:来公司用IE11测了下,没效果。后发现,不是伪类不认识,而是兄弟选择器的渲染bug. 通过修改透明度为0→1变化,鼠标hover清除按钮位置,则按钮出现或隐藏(见下面Gif)。尚未发现什么奇淫技巧修复这个问题。
@H_777_76@
评论有说mac下Chrome浏览器无法清除。经自己测试,可以的。如果意思是点击关闭按钮清除,确实CSS无能为力。
实现的优点
此方法相比传统JS实现的好处在于,更简单了。JS的话还要侦听输入事件(input
)等,比较折腾。CSS的话完全浏览器自身事件特性,显然,高效简单的多。
实现的不足
不足在于,兼容性。IE9-以下的浏览器只能点蜡烛了。
不过,写写原型啊,demo;或者渐进增强使用;或者移动端开发等,都可以试试这个新技能。
注意:点击叉叉是不会清除的,本文只是输入控制显隐!!
三、新技能传授-哔哔哔哔
如果你约会迟到了,如果你说“对不起我来晚了+各种理由”,可能就会是下面这个下场:
但是,如果你双手顶礼,单膝下跪,恳切说道:“微臣护驾来迟请娘娘恕罪”(无需任何理由),您可能是这样:
(本篇完)
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 小tip: CSS动态实现文本框清除按钮的隐藏与显示
本文地址: https://pptw.com/jishu/586825.html