在IE10中，包含值的焦点文本框将在其右侧添加一个小x。此x允许用户单击文本框以清除其值。
其他questions涉及从用户的 View 中删除此功能，但是除了在文本框的右侧添加我自己的图标(例如搜索图标)之外，我还想维护该功能。不幸的是，这些图标最终会发生冲突，因此我需要确定一种移动图标的方法，而我的搜索从未得到任何结果。
我一直试图回答的问题:IE10 + ::-ms-clear 伪元素可以使用哪些其他属性？
最佳答案
更新:正如其他答复者指出的那样，MS文档已于2013年6月19日更新，包括 ::-ms-clear 可用的所有属性。目前尚不清楚这是否适用于IE10而非当前即将发布的IE11，因此我将在下面留下其余答案。
为了完整起见，他们还更新了 ::-ms-reveal 的文档，该文档似乎与::-ms-clear完全相同。
以下答案至少适用于IE10。
我找不到详尽的 list ，这使我无法进行实验:
::-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;
}
关于css - 在Internet Explorer 10中移动或配置::-ms-clear，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15467775/