其他questions已经涉及从用户的视图中删除此功能,但除了在文本框的右侧添加我自己的图标(例如搜索图标)之外,我还想维护该功能.不幸的是,这些图标最终会发生碰撞,因此我需要确定一种移动图标的方法,而我的搜索结果从未显示过任何结果.
我一直试图回答的问题：IE10 ::-ms-clear伪元素可以使用哪些其他属性？
解决方法
::-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属性,似乎很有用：
>保证金：保证金让我有机会从文本框的右侧转移它.我按照我的图标大小调整了它,加上1-3个像素来提供缓冲区.只有margin-left似乎不起作用.
>背景：只是x的背景.应用任何背景设置都会将您想要的内容置于其后;它不会取代x！
> color：控制x的颜色.
>显示：作为让我在这里注意到的问题,没有人会隐藏x.
>可见性：似乎可以像人们期望的那样工作.
您可以将颜色和背景组合在一起,用不同的背景图像替换x,只要它适合x的给定大小,看起来大约是20px,但这只是我的眼球.
::-ms-clear {
color: transparent;
background: no-repeat url("../path/to/image") center;
}
做过某事的CSS属性,但似乎没用：
> padding：它影响x,但从未像我实际预期的那样影响(一切似乎都隐藏了图标,或者至少将其移出视图).
> position：与填充相同的行为.不可否认,我更像是程序员而不是设计师,所以这可能是我自己的缺点.
我猜测的CSS属性可能会有所作为,但它根本没有做任何事情：
> text-align
>漂浮
添加其他CSS伪元素不会影响:: – ms-clear.具体来说,我尝试了:: after和::之前的内容：“y”,并且没有人得到结果.
显然它取决于您打算应用于文本框的伴随图标的大小,但我使用14-16px图标,我发现右边距：17px给了xa明确的间隙,这将x移到了我的左侧右对齐图标.有趣的是,保证金左边似乎没有效果,但你可以使用负值来保证保证金.
我最终使用的实际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;
}
