7

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

其他问题涉及从用户视图中删除此功能，但除了在文本框右侧添加我自己的图标（例如搜索图标）之外，我还想保留该功能。不幸的是，这些图标最终会发生碰撞，所以我需要确定一种移动图标的方法，而我的搜索从未出现任何结果。

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

4

2 回答 2

12

更新：正如另一位回答者所指出的，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，但没有一个得到结果。::beforecontent: "y"

显然，这取决于您打算应用于文本框的配套图标的大小，但我使用 14-16 像素的图标，我发现这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;
}
于 2013-03-17T23:55:55.723 回答
1

至少可以在 MS 网站上找到一份清单。 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx

（但也许我误解了这个问题。）

于 2013-07-01T14:14:20.103 回答