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

Question

在IE10中,包含值的聚焦文本框将x在它们的右侧添加一点.这x允许用户单击文本框以清除其值.

其他问题涉及从用户的视图中删除此功能,但除了在文本框的右侧添加我自己的图标(例如搜索图标)之外,我还想维护该功能.不幸的是,这些图标最终会发生碰撞,因此我需要确定一种移动图标的方法,而我的搜索结果从未显示过任何结果.

我一直试图回答的问题: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.

您可以结合color并background以替换该x有不同的背景图像,只要它的给定的尺寸范围内配合x,这似乎是20像素左右,但这只是我目测它.

::-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;
}