CSS动态实现文本框清除按钮的隐藏与显示


一、新技能传授-哔哔哔哔

新技能GET

见此图犹如见到神教主,还不跪下膜拜~~

膜拜

二、新技能传授-哔哔哔哔

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浏览器):
FireFox下清除按钮状态截图1

FireFox下清除按钮状态截图2

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

实现原理

  1. HTML部分
    因为 search 类型文本框在Chrome/Opera/Safari下尺寸不好控制,因此使用缺省的类型(也就是 text 类型);
    required 是必要属性,配合CSS伪类实现我们的效果。
  2. 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

(本篇完)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值