去除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

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 : 0;height: 0;
}

去除IE10自带的清除按钮相关推荐

如何在安卓的后台最近任务添加一键清除按钮
在安卓7.0之前,安卓默认是不带一键清除按钮的,只能通过左滑右滑清楚最近任务,本文为大家介绍如何在后台添加一个一键删除按钮,过程如下 1. 在RecentActivity界面添加一个button,点击 ...
uni-app多个输入框带清除按钮
<template><view><view class="uni-form-item uni-column"><view class=&q ...
如何实现input输入框自带清除按钮
最近,项目中需要,在输入框获取焦点是动态显示"×"图标.即在输入框中输入内容时,右边显示"×"按钮:输入框为空时,"×"按钮消失.难点在于获 ...
android搜索功能以及显示历史纪录带清除按钮
其实这部分主要是实现很多逻辑功能顺序,点击搜索出来的内容显示在一个listview中,然后历史记录又显示在另一个listview中,只要设置listview.setVisibility(View.GO ...
bootstrap带图标的按钮与图标做连接
bootstrap通过引入bootstrap的JS与css文件,给元素添加class属性即可. 使用图标只需要加入一个span,class属性设置为对应的图标属性即可.图标对应的class属性可以参考 ...
android edittext清除功能,Android：带一键清除功能的EditText
作为一个前端应用开发者,下面这样的场景可以说是屡见不鲜了? 20181218135459.png 当然了,本文所要讲的重点不是如何做一个登录页面,而是输入框后面的那个清除按钮.你可能会说了,这有什么好 ...
bootstrap-datetimepicker时间控件添加清除按钮
本文转自:https://blog.csdn.net/gyysmile/article/details/80226993 其实这位大神写的很好了,为什么我还要在写呢,因为我想写点东西了最近测试部提出 ...
自定义Android带图片的按钮
自定义Android带图片的按钮前言现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大的放大镜图标 ...
Android UI之ImageButton(带图标的按钮)
除了Android系统自带的Button按钮一万,还提供了带图标的按钮ImageButton 要制作带图标的按钮,首先要在布局文件中定义ImageButton,然后通过setImageDrawable ...

去除IE10自带的清除按钮

去除IE10自带的清除按钮相关推荐

最新文章

热门文章