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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有