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

Question

在阅读一篇关于HTML5的文章时，我想到了一个问题：虽然占位符在表单中非常有用，但如果不能在没有JavaScript的情况下使用CSS来定位它们，那么这只是迈出的一小步。

那么我能否通过CSS对占位符进行定位并使其与输入的文本不同呢？

- Mild Fuzz

---

有没有一种方法可以在没有JavaScript的情况下获得“占位符”行为？ - Pointy

请将输入框的HTML5占位符颜色更改为CSS中的颜色。 - Jon Hadley

@Pointy 是的，就像 Mild Fuzz 所说的那样，它是基于 HTML5 的。例如，这个链接（http://jsfiddle.net/jnzhe/）在 Chrome 中已经可以运行了。 - Matt Gibson

@Jon 不错的发现；我已经给那个旧问题打上了“伪类”标签，这样更容易找到了；我觉得这是那个问题缺失的重要术语。 - Matt Gibson

Answer 1

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

- Lea Verou

---

感谢提供有用的信息。是否有适用于IE9的变体？ - Lea Hayes

IE9不支持占位符。 - Lea Verou

你可以假定在未来的兼容性中使用 ::-ms-input-placeholder 和 ::placeholder。 - Jason

不可以。你会冒险的。这些都没有标准化，而且它们彼此之间甚至不兼容。没有任何迹象表明IE将采用WebKit的方法，或者标准将是两种方法的混合体。 - Lea Verou

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

这是一个好的资源。

- Mehdi Raash