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

Question

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

7

在IE10中，一个包含值的聚焦文本框右侧会添加一个小的“x”。这个“x”允许用户单击文本框以清除其值。其他问题已经涉及如何从用户视图中删除此功能，但我想保留该功能并在文本框右侧添加自己的图标，例如搜索图标。不幸的是，这些图标会发生冲突，因此我需要确定一种移动图标的方法，但我的搜索没有任何结果。我一直在尝试回答的问题是：IE10+ ::-ms-clear 伪元素可以使用哪些其他属性？

- pickypg

2个回答

1

至少在微软网站上有一个列表可用。 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx （但也许我误解了问题。）

- user2539315

不，你完全理解得没错。看起来微软在6月19日更新了他们的文档。这与我问题中的最后一个链接相同。 - pickypg

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pickypg · Accepted Answer

更新: 正如另一个回答者指出的那样，自2013年6月19日以来，MS文档已经更新，包括::-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按预期工作。

您可以将color和background组合起来，以替换x为不同的背景图像，只要它适合于给定的x大小，大约为20px，但这只是我眼测得出的。

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

做了某些事情但似乎没什么用的CSS属性：

padding：它影响了x，但从未像我预期的那样起作用（一切似乎都会隐藏图标，或者至少将其移出视野）。
position：与padding的行为完全相同。诚然，我更像一个程序员而不是设计师，所以这可能是我的缺点。

我猜测可能会有作用的CSS属性，但实际上根本没有作用：

text-align
float

添加其他CSS伪元素不会影响::-ms-clear。具体来说，我尝试使用::after和::before，并使用content: "y"对其进行操作，但没有任何结果。

显然，这取决于您想应用于文本框的伴随图标的大小，但我使用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;
}