HTML5 表单文本占位符 - 它们有 CSS 伪类吗？

Posted 2023-03-05

【中文标题】HTML5 表单文本占位符 - 它们有 CSS 伪类吗？

【英文标题】：HTML5 Form Text Placeholders - Do they have a CSS pseudo-class?

【发布时间】：2011-06-19 07:59:50

【问题描述】：

读了一篇关于 html5 的文章，我突然想到，虽然占位符在表单可用性方面非常有用，但如果它们不能在没有 javascript 的情况下使用 CSS 来定位，那么它们确实是一个婴儿步骤。

那么我可以将 CSS 中的占位符定位为与输入文本不同的外观吗？

【问题讨论】：

有没有办法在没有 JavaScript 的情况下获得“占位符”行为？

重复：***.com/questions/2610497/…

@Pointy 是的，正如 Mild Fuzz 所说，它在 HTML5 中。 This, for example，已经可以在 Chrome 中使用了。

好的，谢谢你的信息:-)

@Jon 很好的发现；我现在用“伪类”标记了那个较旧的问题，以便更容易找到；让我印象深刻的是，这是该问题中缺少的重要术语。

【参考方案1】：

Webkit 使用 ::-webkit-input-placeholder 伪元素。 Moz 使用 :-moz-placeholder 伪类。

【讨论】：

感谢您提供的有用信息。 IE9 有变种吗？

IE9 不支持占位符。

感谢您为我澄清这一点。

您可以假设 ::-ms-input-placeholder 和 ::placeholder 以供将来兼容。

不，你不能。你会赌一把。这些都不是标准化的，它们甚至彼此不兼容。没有任何迹象表明 IE 将采用 WebKit 的方法或标准将两者兼而有之。

【参考方案2】：

我假设你的 HTML 中有这样的东西

<input type="text" name="name" />

对应的css是

input::-webkit-input-placeholder  /* Chrome/Opera/Safari */
  color: blue;

input::-moz-placeholder  /* Firefox 19+ */
  color: blue;

input:-ms-input-placeholder  /* IE 10+ */
  color: blue;

input:-moz-placeholder  /* Firefox 18- */
  color: blue;

input:placeholder  
  color: blue;

我也鼓励你看看

input:placeholder-shown 
  border: 5px solid red;

这是一个很好的resource。