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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369434.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux/CentOS7install PackageError: Loaded plugins: fastestmirror

Centons7 其大概意思是fastestmirror不能使用,fastestmirror是yum的一个加速插件,具体我也没有仔细了解过,可能是系统不支持或者缺少组件导致的。 处理办法就是禁用这个插件,方法如下: [rootlocalhost ~]# vim /etc/yu…

不要仅仅依靠单元测试

当您构建一个复杂的系统时,仅仅测试组件是不够的。 这很关键,但还不够。 想象一下一家汽车厂生产并进口最高质量的零件,但组装好之后再也不会启动发动机了。 如果您的测试用例套件几乎不包含单元测试,则您将永远无法确保系统整体正…

spring mvc的工作原理

该文转载自:http://blog.csdn.net/u012191627/article/details/41943393 SpringMVC框架介绍 1) spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面。 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的…

oracle快速插入大量数据

方法一:循环 declare -- Local variables here m integer; begin -- Test statements here--输出开始时间 dbms_output.put_line(start:||sysdate); m:0;--循环插入的数据量 for i in 1..4000 loop m:m1; --插入语句,其中admintest||m, 为admintest后面…

春天遇见Apache Hadoop

SpringSource 刚刚宣布了适用于Apache Hadoop的Spring的第一个GA版本 。 该项目的目的是简化基于Hadoop的应用程序的开发。 您可以下载该项目在这里 ,并检查了Maven的文物在这里 。 Apache Hadoop的Spring诞生是为了解决Hadoop应用程序构建不良的问题,…

linux 模拟时序,stm32GPIO模拟时序读写nandflash(K9F1G08U0B)问题

我使用的STM32F103VBT6这款芯片,K9F1G08U0B和 STM32F103VBT6连接接口有如下对应关系:ALE——PA1WE——PA2WP——PA3R\B——PC0RE——PC1CE——PC2CLE——PC38位IO口对应PE0——PE7下面4个函数,对应的是读取设备的ID,我在main函数里调用函数Nand_Flash_Re…

pat 甲级 1072. Gas Station (30)

1072. Gas Station (30) 时间限制200 ms内存限制65536 kB代码长度限制16000 B判题程序Standard作者CHEN, YueA gas station has to be built at such a location that the minimum distance between the station and any of the residential housing is as far away as possibl…

骑士周游问题

骑士周游问题 问题:在一个 8*8 的棋盘上,马按照“日”字走,给定一个起点,打印出马不重复的走完棋盘64个格子的路径。 解答:递归 回溯 (对于任一步,马能走的下一步有8个方向,但是需要…

那些容易遗忘的web前端问题

背景: 年底将至,本人这只才出门的前端菜鸟,终于有空闲的时间来整理一下最近投简历时出现的问题。有的是经常使用但是没有仔细留意造成的;有的是个人认为根本没人使用而忽略的。为了下次不出现这种错误,进行一下总结。…

使用IntelliJ IDEA的原因

介绍 我经常遇到一个问题,为什么我使用Intellij来支持另一个IDE(在本例中为Eclipse)。 大多数时候,我会通过演示IntelliJ的某些功能并展示一切的集成程度来回答这个问题。 这让我开始思考使用它的真正原因是什么。 这篇文章将试图…

linux光标美化包,使用 [ powerlevel10k ] 美化你的WSL (Linux)

使用 [ powerlevel10k ] 美化你的WSL (Linux)使用 [ powerlevel10k ] 美化你的WSL (Linux)前言关于linux终端的美化,网上的教程有很多,但对于国内的用户来说,效果往往是这样的:教程中通过以下命令安装 oh-my-zshsh -c "$(cur…

HashMap实现原理分析

1 HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端。 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大。但数组的二分查找时间复杂度小,为O(1);数组的特点是&#xf…

opencv3.2.0在vs2015下安装与配置

准备工作 VS2015OpenCV 3.2.0OpenCV配置环境变量,path下添加\opencv\build\x64\vc14\bin,新设置的环境变量需要重启才能使用测试工程 新建VC控制台空项目修改平台为x64,这一步先做源文件中加入main.cpp,测试代码:#incl…

CSS实现响应式布局(自动拆分几列)

1.css代码 <style type"text/css">.container{margin-top: 10px;}.outerDiv{float:left;width:100%;}/* 大于648像素一行两个div&#xff0c;innerDiv两个宽度为&#xff1a;(300 4 20)*2 */media screen and (min-width: 648px){.outerDiv {width: 50%}}.inne…

如何使用字节序列化双精度数组(二进制增量编码,用于低差单调浮点数据集)...

低延迟系统需要高性能的消息处理和传递。 由于在大多数情况下&#xff0c;数据必须通过有线传输或进行序列化才能保持持久性&#xff0c;因此编码和解码消息已成为处理管道的重要组成部分。 高性能数据编码的最佳结果通常涉及应用程序数据细节的知识。 本文介绍的技术是一个很好…

error

for(int i1;i<size;i) { if(ba[i]) { pos i1; break; } }输入&#xff1a; a{4,5,7,4,6,8},b4 输出&#xff1a; 位置是4&#xff08;错误&#xff0c;这儿应该是1&#xff0c;但程序未失败。&#xff09;改成&#xff1a;for(int i0;i<size;i) { if(ba[i]) { pos i1; …

c语言第一次作业,C语言培训班第一次作业 (1)

1、以下叙述中正确的是()(A)、用户所定义的标识符不允许使用关键字。(B)、分号是C语句之间的分隔符&#xff0c;不是语句的一部分。(C)、花括号“&#xff5b;&#xff5d;”只能作为函数体的定界符。(D)、构成C程序的基本单位是函数&#xff0c;所有函数都可以由用户命名。1、…

2.Python爬虫入门二之爬虫基础了解

1.什么是爬虫 爬虫&#xff0c;即网络爬虫&#xff0c;大家可以理解为在网络上爬行的一直蜘蛛&#xff0c;互联网就比作一张大网&#xff0c;而爬虫便是在这张网上爬来爬去的蜘蛛咯&#xff0c;如果它遇到资源&#xff0c;那么它就会抓取下来。想抓取什么&#xff1f;这个由你来…

对request.getSession(false)的理解(附程序员常疏忽的一个漏洞)

本文属于本人原创&#xff0c;转载请注明出处&#xff1a;http://blog.csdn.net/xxd851116/archive/2009/06/25/4296866.aspx 【前面的话】 在网上经常看到有人对request.getSession(false)提出疑问&#xff0c;我第一次也很迷惑&#xff0c;看了一下J2EE1.3 API&#xff0c;看…

实现自定义的未来

上一次我们学习了java.util.concurrent.Future<T>背后的原理 。 我们还发现&#xff0c; Future<T>通常由库或框架返回。 但是没有什么可以阻止我们在有意义的情况下自行实现所有功能。 它不是特别复杂&#xff0c;可以显着改善您的设计。 我尽力为我们的示例选择有…