css - 在 Internet Explorer 10 中移动或配置::-ms-clear

Question

在 IE10 中，包含值的焦点文本框将在其右侧添加一个小的 x。此 x 允许用户单击文本框以清除其值。

其他questions已经谈到从用户 View 中删除此功能，但除了在文本框右侧添加我自己的图标(例如搜索图标)之外，我还想保留该功能。不幸的是，这些图标最终会发生碰撞，因此我需要确定一种移动图标的方法，但我的搜索从未出现任何结果。

我一直试图回答的问题:IE10+ 可以使用哪些其他属性 ::-ms-clear伪元素？

Answer 1

更新:正如其他回答者指出的那样，MS 文档已于 2013 年 6 月 19 日更新，以包含所有可用的属性 ::-ms-clear .目前尚不清楚这是否适用于 IE10 而不是当前即将推出的 IE11，因此我将在下面留下其余答案。

为了完整性，他们还更新了 ::-ms-reveal 的文档，这似乎与 ::-ms-clear 完全相同。

下面的答案至少适用于 IE10。

---

我找不到一个详尽的列表，这让我进行了实验:

::-ms-clear {
   margin: *; /* except margin-left */
   background: *;
   color: *;
   display: none|block;
   visibility: *;
}

不幸的是，我无法欺骗 IE 的开发人员模式 (F12) 向我显示样式树中的 ::-ms-clear 属性，所以我不得不手动尝试并重新加载页面以便进行实验。我什至尝试通过添加 onblur=this.focus() 作弊，但这没有用。

有用的 CSS 属性:

• margin:边距让我可以将它从文本框的右侧移开。我将它移动了我的图标大小，加上 1-3 像素以提供缓冲区。只有 margin-left 似乎不起作用。
• background:x 的背景。应用任何 background 设置都会将您想要的内容置于其后；它不会替换 x!
• color:控制x的颜色。
• display:正如让我来到这里的问题所指出的，none 将隐藏 x。
• visibility:似乎像人们期望的那样工作，类似于display。

您可以结合颜色和背景来替换x一个不同的背景图像，只要它适合 x 的给定大小，它看起来大约是 20px，但这只是我的目测。

::-ms-clear {
    color: transparent;
    background: no-repeat url("../path/to/image") center;
}

做了一些事情，但似乎没有用的 CSS 属性:

• padding:它会影响 x，但从来没有像我实际预期的那样产生效果(一切似乎都隐藏了图标，或者至少将其移出视野)。
• position:与padding 相同的行为。不可否认，我更像是一个程序员而不是一个设计师，所以这可能是我自己的缺点。

我猜想 CSS 属性可能会做一些事情，但那根本没有做任何事情:

• 文本对齐
• float

添加其他 CSS 伪元素不会影响 ::-ms-clear。具体来说，我用 content: "y" 尝试了 ::after 和 ::before，但都没有结果。

显然这取决于您打算应用于文本框的伴随图标的大小，但我使用 14-16px 图标并且我发现 margin-right: 17px 给出了 x 一个明显的间隙，它将 x 移动到我的右对齐图标的左侧。有趣的是，margin-left 似乎没有任何作用，但您可以为 margin-right 使用负值。

我最终使用的实际 CSS，它阻止了我的图标被 x 覆盖。

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
    margin-right: 17px;
}

我的图标都共享相同的基本名称，tbc-icon-，这意味着 ::-ms-clear 伪元素会自动应用于所有图标每当他们被应用时。在所有其他情况下，伪元素以其默认方式运行。

有趣的是，::-ms-reveal 似乎以相同的方式运行，如果您打算将图标应用于密码字段(我预计这不太可能)，那么您可以按照上面的例子:

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
    margin-right: 17px;
}