删除某些输入上的IE10的“清除字段” X按钮？

742

当然，这是一个有用的功能，但是有什么方法可以禁用它吗？
例如，如果表单是单个文本字段，并且旁边已经有一个“清除”按钮，则也不需要X。在这种情况下，最好将其删除。

能做到吗？如果可以，怎么做？

css internet-explorer-10

— Niet the Dark Absol
source

1

这对于具有默认值且无意义的空白（例如数量）的字段也很有用。

— Joe Flynn

4

由于这不会触发输入类型，因此绑定javascript事件时非常棘手。

— 2014年

1267

设置框的::-ms-clear伪元素的样式：

.someinput::-ms-clear {
    display: none;
}

— Ry-
source

14

如果使用IE兼容模式使用IE10之前的引擎渲染页面，这很有趣，此伪元素将不起作用，并且无论如何都会显示按钮。

— Yousef Salimpour

@Yousef：是的，这就是它的工作原理，并且是您永远不要在实际网站中使用兼容模式的部分原因。它实际上并不兼容:)

— Ry-

@minitech-Windows 7计算机上的IE9

— 2013年

3

此控件仅出现在Win8的IE10 +中。诀窍是，当文档处于兼容模式时，它仍然会出现。

— EricLaw 2013年

48

@EricLaw：好吧，不仅限于Win8。我现在正在使用Windows 7，我可以在IE10中看到那些X按钮。因此，您可能会说这是仅IE10 +的功能（尽管不确定IE9），但绝对不是Win8，因为它出现在IE10的Win7版本中。无论如何，谢谢你的提示，@ minitech！

— OMA 2013年

272

我发现最好将width和设置height为0px。否则，IE10会忽略该字段上定义的填充padding-right--旨在防止文本在我覆盖在输入字段上的“ X”图标上键入内容。我猜测IE10在内部将padding-right输入的应用于::--ms-clear伪元素，而隐藏伪元素不会将padding-right值恢复为input。

这对我来说更好：

.someinput::-ms-clear {
  width : 0;
  height: 0;
}

— 金普
source

3

这是一个jsFiddle说明了解决方法：jsfiddle.net/zoldello/S5YRj

— Phil

106

我将此规则应用于text类型的所有输入字段，因此以后无需重复：

input[type=text]::-ms-clear { display: none; }

通过使用以下方法甚至可以降低具体性：

::-ms-clear { display: none; }

我甚至在添加此答案之前就使用了后者，但认为大多数人都希望比此更具体。两种解决方案都可以正常工作。

— 华莱士·西德瑞（WallaceSidhrée）
source

谢谢，对我有用。

— Sooraj Jose

76

您应该为::-ms-clear（http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx）设置样式：

::-ms-clear {
   display: none;
}

您还可::-ms-reveal以为密码字段设置伪元素样式：

::-ms-reveal {
   display: none;
}

— 公爵
source

6

注意– ::-ms-reveal在删除元素之前，请考虑是否可以使该元素正常工作！（或者，如果您要为每个人提供此按钮，例如原始的问询者。）有些人确实使用了它。

— Ry-

3

@minitech-听起来不错。您能告诉我们如何在输入事件中使用Java绑定吗？它不会引发事件，因此几乎无法使用。

— DarrellNorton

11

我认为值得注意的是，当页面以兼容模式运行时，所有基于样式和CSS的解决方案都无法正常工作。即使浏览器显示x，兼容模式渲染器也会忽略::-ms-clear元素。

如果您的页面需要在兼容模式下运行，则可能会遇到X停留的情况。

就我而言，我正在使用一些第三方数据绑定控件，并且我们的解决方案是处理“ onchange”事件并如果使用x按钮清除了该字段，则清除后备存储。

— 汤姆XP411
source

0

隐藏箭头并在“时间”输入中交叉：

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}

— ClemPat
source