去除IE10自带的清除按钮
最近在工作中碰到了一个问题,原本在IE8,IE9下正常的input表单,在IE10下会出现清除按钮,即表单右侧会出现一个可以清除该表单内容的小叉。由于之前一直没有兼容过IE10,所以我专门搜了下原因。发现,该功能是微软在IE10上新添加的功能,用于快速清空表单值。
而问题是,工作中使用到的表单控件以及日期组件右侧有清除图标以及日历图标,这使得在IE10下,input表单右侧会出现图表叠加的情况——即控件自带的图标和IE10自带的清除按钮重叠。很明显,这影响了用户体验,所以当务之急是去除或隐藏该按钮。
首先,我通过开发者工具想要直接选中该按钮,然后隐藏该按钮。然而,我发现:在开发者工具上无法发现该节点,这直接导致方案一失败。
通过在Stack Overflow上的一番搜索,我找到了相关问题:点击跳转
最高票答案中,通过伪类选择器—— ::-ms-clear选中了该按钮,然后隐藏该按钮。即:
input::-ms-clear {
display: none;
}
通过测试,该方法确实可以去除该按钮,但是赞同数第二的答案中写道:
I found it's better to set the width
and height
to 0px
. Otherwise, IE10 ignores the padding defined on the field -- padding-right
-- which was intended to keep the text from typing over the 'X' icon that I overlayed on the input field. I'm guessing that IE10 is internally applying the padding-right
of the input to the ::--ms-clear
pseudo element, and hiding the pseudo element does not restore the padding-right
value to the input
.
翻译过来就是:他认为最好将高宽设为0px来隐藏该按钮,因为他发现该按钮自带padding-right属性以防止文字覆盖该属性,而如果直接通过display进行隐藏,则将失去padding-right属性造成文字覆盖的bug。
所以,该问题的最佳解决方法为通过伪类选择器选择该元素,然后将其高宽设为0隐藏该元素:
input::-ms-clear {
width :;
height:;
}
去除IE10自带的清除按钮的更多相关文章
- 去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小
有时候需要用input元素中type属性值为number时,会出现默认的上下按钮, 去掉input默认的上下按钮:兼容性写法如下 input[type='number']::-webkit-outer ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- WPF 带清除按钮的文字框SearchTextBox
原文:WPF 带清除按钮的文字框SearchTextBox 基于TextBox的带清除按钮的搜索框 样式部分: <!--带清除按钮文字框--> <Style TargetType=& ...
- 实用的php清除html,php去除空格与换行,php清除空白行和换行,提取页面纯文本
实用的php清除html,换行,空格类,php去除空格与换行,php清除空白行和换行,提取页面纯文本内容 方法一: function DeleteHtml($str) { $str = trim($s ...
- Kivy 中文教程 实例入门 简易画板 (Simple Paint App):3. 随机颜色及清除按钮
1. 随机颜色 通过前面的教程,咪博士已经带大家实现了画板的绘图功能.但是,现在画板只能画出黄色的图案,还十分单调,接下来咪博士就教大家,如何使用随机颜色,让画板变得五彩斑斓. 改进后的代码如下: f ...
- bootstrap带图标的按钮与图标做连接
bootstrap通过引入bootstrap的JS与css文件,给元素添加class属性即可. 使用图标只需要加入一个span,class属性设置为对应的图标属性即可.图标对应的class属性可以参考 ...
- Android自定义控件实现带有清除按钮的EditText
首先声明我也是参考了别人的思路,只是稍微做了下修改,增加显示密码与隐藏密码,没有输入字符串时让EditText进行抖动,废话少说这里附上效果图 效果很赞有木有 那么怎么实现这种效果呢?那就跟着我一起来 ...
- CSS动态实现文本框清除按钮的隐藏与显示
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视):FireFox浏览器貌似任何类型的输入框都无动于衷 ...
随机推荐
- Angular Universal(统一平台)笔记
angular官网高级文档AngularUniversal部分的翻译总结,这东西在angular4开始正式被官方支持了,目前其实支持的服务器端还没有很多,但好歹包括了node和DotNetCore,算 ...
- 深入理解Python的字符编码
原文:http://lukejin.iteye.com/blog/598303 在处理中文的时候,我们有时候会碰到中文乱码的问题. 究其根本原因是正确的字节序列按照错误的编码方式解码成字符 或者正确的 ...
- hiboCoder 1041 国庆出游 dfs+思维
先抽象出一棵以1做为根结点的树.给定了访问序列a[1..m]. 考虑两种特殊情况: 1.访问了某个a[j],但是存在a[i]没有访问且i < j,出现这种情况说明a[j]一定是a[i]的祖先节点 ...
- HDU - 1213 dfs求联通块or并查集
思路:给定一个无向图,判断有几个联通块. AC代码 #include <cstdio> #include <cmath> #include <algorithm> ...
- mybatis与spring的整合(使用接口实现crud)
本人刚刚接触mybatis,今天把它和spring整合起来用了一个上午==. 一开始是通过配置文件来配置,后来尝试用了一下注解,觉得mybatis的注解真的有点恶心...一大坨的,所以我还是建议使用配 ...
- hbase 命令
HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服 ...
- DAVINCI DM6446 开发攻略——V4L2视频驱动和应用分析
针对DAVINCI DM6446平台,网络上也有很多网友写了V4L2的驱动,但只是解析Montavista linux-2.6.10 V4L2的原理.结构和函数,深度不够.本文决定把Montavis ...
- 问题解决了,可是为什么呢?could not find the main class.program will exitmain
今天重新学习socket编写简单的在线聊天,简单功能实现的情况下,一时心血来潮便想要把这程序打成可执行的jar包,以便于在桌面直接双击运行. 参照自己之前写的那篇<>打好两个jar包以后却 ...
- 不使用spring的情况下用java原生代码操作mongodb数据库的两种方式
由于更改了mongodb3.0数据库的密码,导致这几天storm组对数据进行处理的时候,一直在报mongodb数据库连接不上的异常. 主要原因实际上是和mongodb本身无关的,因为他们改的是配置 ...
- 关于TS流的解析
字节.在TS流里可以填入很多类型的数据,如视频.音频.自定义信息等.他的包的结构为,包头为4个字节,负载为184个字节(这184个字节不一定都是有效数据,有一些可能为填充数据). 工作形式: 因为在T ...