html5默认input内容清除“×”按钮去除办法
2015-12-21 10:00
501 查看
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:
输入任意内容:required>
然后就有类似下面截图的效果了
相关文章推荐
- HTML5的新增标签和废除的标签
- HTML5标签使用的常见误区
- HTML5中Form表单使用方法
- HTML5表单信息验证工作原理
- HTML5的不足
- 为什么学html5?
- HTML5的发展趋势
- html5 自带表单验证怎么禁用
- HTML5表单必填项属性required="required"
- HTML5新增标签的汇总与详解
- 5个主流的HTML5开发工具
- 想要战胜 Flash, HTML5 还需要什么?
- HTML5 Web存储(Web Storage)(5)
- HTML5地理定位用法
- html5实际和离线应用分析
- HTML5 开发离线应用
- HTML5几个常见的标签
- HTML5基础/简介
- [CSS3 + HTML5] Modernizr
- Html5的一些引擎使用感触