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

Question

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

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

Answer 1

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

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

这是一个很好的资源。