CSS动态实现文本框清除按钮的隐藏与显示
2016-02-26 17:03
573 查看
当前现代浏览器中,Chrome浏览器下
借助HTML以及CSS,来模拟清除按钮可动态呈现的搜索框
如下css:
如下html:
然后就有类似下面截图的效果了(均截自FireFox浏览器):
[b]实现原理[/b]
HTML部分:
因为
[b]CSS部分:[/b]
使用的是
啊,对了。IE11浏览器下不是所有的文本框都有黑色的叉叉吗,会跟这里的自定义清除按钮重叠,
实现的优点
此方法相比传统JS实现的好处在于,更简单了。JS的话还要侦听输入事件(
实现的不足
不足在于,兼容性。IE9-以下的浏览器只能点蜡烛了。
注意:点击叉叉是不会清除的,本文只是输入控制显隐!!
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浏览器):
[b]实现原理[/b]
HTML部分:
因为
search类型文本框在Chrome/Opera/Safari下尺寸不好控制,因此使用缺省的类型(也就是
text类型);
required是必要属性,配合CSS伪类实现我们的效果。
[b]CSS部分:[/b]
使用的是
:valid伪类。这是CSS3中新增伪类,IE10+以及其他现代浏览器支持,表示表单合法。由于HTML中的
<input>有HTML5表单验证属性
required. 于是,如果文本框没有内容,则不合法;有内容,则合法,就会触发这里的
:valid伪类选择器。而这里
:valid伪类控制后面的清除按钮显示,于是就实现了我们想要的效果。
啊,对了。IE11浏览器下不是所有的文本框都有黑色的叉叉吗,会跟这里的自定义清除按钮重叠,
::-ms-clear { display: none; }这段代码可以去之~~
实现的优点
此方法相比传统JS实现的好处在于,更简单了。JS的话还要侦听输入事件(
input)等,比较折腾。CSS的话完全浏览器自身事件特性,显然,高效简单的多。
实现的不足
不足在于,兼容性。IE9-以下的浏览器只能点蜡烛了。
注意:点击叉叉是不会清除的,本文只是输入控制显隐!!
相关文章推荐
- 自定义TabHost,TabWidget样式 .
- html入门/元素/属性/格式化/样式
- CSS水平方向自适应布局方法小结
- 平台中配置网格列表样式报:ORA-01461错误
- css引用图片的方法
- 平台中配置网格列表样式报:ORA-01461错误
- CSS 知识小积累
- 浅谈外边距的叠加
- 页面定制CSS代码初探(二):自定义h2标题样式 添加阴影 添加底色 等
- CSS3中如何使元素曲线运动
- css3中webkit-linear-gradient、box-shadow属性的使用
- CSS【02】——css兼容性问题处理
- CSS3中transform移动属性的使用
- CSS 基本知识
- 【CSS3】关于box-shadow的扩展半径
- 详解css3中transition过渡属性
- css选择器中是否加空格的差别
- html+css制作带三角的矩形
- Css3:transform变形
- 让IE6/IE7/IE8浏览器支持CSS3属性