CSS动态实现文本框清除按钮的隐藏与显示
2014-11-21 17:04
711 查看
原文
/Uploads/Images/Content/201908/25/3aad0afad39bdc704ea943b76814b1bd
一、新技能传授-哔哔哔哔
见此图犹如见到神教主,还不跪下膜拜~~
二、新技能传授-哔哔哔哔
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; }这段代码可以去之~~
更多伪元素改变表单控件默认样式可以参考“
伪元素改变表单控件默认样式 ”一文。
实现的优点
此方法相比传统JS实现的好处在于,更简单了。JS的话还要侦听输入事件(
input)等,比较折腾。CSS的话完全浏览器自身事件特性,显然,高效简单的多。
实现的不足
不足在于,兼容性。IE9-以下的浏览器只能点蜡烛了。
不过,写写原型啊,demo;或者渐进增强使用;或者移动端开发等,都可以试试这个新技能。
三、新技能传授-哔哔哔哔
如果你约会迟到了,如果你说“对不起我来晚了+各种理由”,可能就会是下面这个下场:但是,如果你双手顶礼,单膝下跪,恳切说道:“微臣护驾来迟请娘娘恕罪”(无需任何理由),您可能是这样:
本文为原创文章,日后会有补充于修正,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: http://www.zhangxinxu.com/wordpress/?p=4077
(本篇完)
相关文章推荐
- CSS动态实现文本框清除按钮的隐藏与显示
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- php 实现其中的单选按钮控制文本框的显示与隐藏
- easyUI动态设置显示隐藏折叠按钮(在JS中实现)
- 利用5个标签,4个文本框,2个按钮,自己设计布局实现输入三边求三角形面积。界面如下所示。三角形类的编写可以使用实验4中已经写过的三角形类,当点击“判断三边”时,若能构成三角形,在标签5上显示“可以构成三角形!”,如不能构成三角形,在标签5上显示“不能构成三
- css 文字按钮实现样式submit按钮以文本的形式显示出来
- 解读M$源代码:JavaScript+CSS实现动态菜单显示
- CSS小例子(只显示下划线的文本框,像文字一样的按钮)
- 编写Applet程序实现一个计算器,包括10个数字(0~9)按钮和4个运算符(加、减、乘、除)按钮,以及等号和清空两个辅助按钮,还有一个显示输入输出的文本框。试用GridLayout实现之
- 实现html中就一个按钮和一个文本框,点击按钮显示文本框,再点击文本框消失,再次点击又出现。
- .net 动态生成文本框..实现 按钮点击的时候生成
- CSS+JavaScript实现层级显示隐藏
- asp.net + CSS实现动态菜单突出显示当前页面!
- CSS 带显示隐藏左部页面按钮
- 通过js选择按钮实现一个内容隐藏另一个内容显示
- GridView实现鼠标移动是,动态显示‘编辑、删除、查看’等命令按钮
- 单击按钮显示新窗体,再按下新窗体隐藏功能的实现
- CSS小例子(只显示下划线的文本框,像文字一样的按钮)
- css中实现div的显示和隐藏