如何禁用 IE10 插入文本框的清除按钮？

Posted 2023-03-04

【中文标题】如何禁用 IE10 插入文本框的清除按钮？

【英文标题】：How can I disable the clear button that IE10 inserts into textboxes?

【发布时间】：2012-11-09 00:20:51

【问题描述】：

如何禁用 Internet Explorer 10 中的新功能，当它获得焦点并且我有内容时，它会在文本框中显示一个小“x”？

【问题讨论】：

他们不断地添加东西……好主意，但是……

他们怎么可能认为这是个好主意？我第一次看到它时不知道它做了什么，而且我是一名开发人员......

规范中没有，所以不应该有

这样一个令人难以置信的可怕功能。当显示右对齐的数字时 - 你点击数字中的某个位置，但光标最终会在其他地方结束，因为这个清除按钮会将文本移到左边！ IE 让 MS 很尴尬。

Remove IE10's "clear field" X button on certain inputs?的可能重复

【参考方案1】：

input::-ms-clear
   display:none;

这对我有用。

【参考方案2】：

请注意，当页面在兼容性视图中运行时，样式和 CSS 解决方案不起作用。我假设这是因为清除按钮是在 IE7 之后引入的，因此兼容性视图中使用的 IE7 渲染器不会将 ::-ms-clear 视为有效的样式标题。

【参考方案3】：

我就是这样做的

input[type=text]::-ms-clear

    display: none;

【参考方案4】：

在 IE 10+ 中，文本输入 (input[type=text]) 在您开始输入后会在字段右侧显示一个 (x) 按钮，用于清除/删除输入的文本值。

在 Chrome 中，搜索输入 (input[type=search]) 会显示类似的按钮。

如果您希望为 IE10+ 和/或 Chrome 删除其中任何一个。您可以添加下面的样式以从输入中隐藏此按钮。

查看实际情况... http://codepen.io/sutthoff/pen/jqqzJg

/* IE10+ */
::-ms-clear 
  display: none;


/* Chrome */
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration  
  display: none; 

【讨论】：

一个更详细的答案将有助于未来的读者更好地理解。

【参考方案5】：

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

【讨论】：

太好了，谢谢！其他表单元素是否有类似的方法可用？

仅供参考：仅当浏览器处于 IE10 模式而非兼容模式时才有效。呜呜！！

有谁知道，如何为 IE9 解决这个问题？

@ScottSelby：也许用户真的会喜欢它，所有其他浏览器都会实现它。 html 规范没有定义应该如何呈现表单字段（我不认为）。似乎没有人介意 ios Safari 的 URL 字段添加了一个“x”图标来清除它。

最好将width和height设置为0px。否则，IE10 会忽略字段上定义的填充：***.com/a/14739092/3163075