::placeholder

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

::placeholder 伪元素(或在某些情况下为伪类,具体取决于浏览器实现)允许您为表单元素的占位符文本设置样式。就像使用 placeholder 属性设置的文本一样。

<input type="email" placeholder="[email protected]">

您可以使用这些零星的供应商前缀选择器在大多数浏览器中设置该文本的样式。

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

重要警告:此语法非标准,因此名称如此混乱。它根本没有出现在规范中。:placeholder-shown 是标准的,甚至规范作者也认为 ::placeholder 将成为标准化版本。

像任何伪元素一样,您可以根据需要将其范围限定到特定元素,例如

input[type="email"].big-dog::-webkit-input-placeholder {
  color: orange;
}

演示

:placeholder-shown::placeholder 的区别

:placeholder-shown 用于在显示占位符文本时选择输入本身。与 ::placeholder 设置占位符文本样式相反。

这是一个图表

我发现这非常令人困惑,因为

  1. 规范中只有 :placeholder-shown 而没有 ::placeholder
  2. :placeholder-shown 仍然可以影响占位符文本的样式,因为它是一个父元素(例如字体大小)。

请注意,:placeholder-shown 是一个伪(它处于特定状态的元素),而 ::placeholder 是一个伪元素(一个实际上不在 DOM 中的可见事物)。可以通过单冒号和双冒号来区分。

Tab Atkins 通过电子邮件向我解释清楚了这一点。

:placeholder-shown 作为一个伪类,必须选择一个现有的元素——它在您处于显示占位符状态时选择输入。::placeholder 伪元素包装实际的占位符文本。

元素还是类?

此功能未标准化。这意味着每个浏览器对它的工作方式都有不同的想法。

Firefox 最初将此作为伪类实现,但由于一系列原因而进行了更改。长话短说,您无法使用伪类做太多事情。

例如,如果要更改输入获得焦点时文本的颜色。您将使用类似 input:focus::placeholder 的选择器,而使用伪类则无法做到这一点(它们的堆叠方式不同)。

IE10 将此作为伪类而不是元素来支持。其他所有人都实现了伪元素。

Firefox 占位符颜色

您可能会注意到,与其他浏览器相比,Firefox 中占位符的颜色看起来比较暗淡。在下图中,左侧显示的是 Firefox 43,右侧显示的是 Chrome 47。

Chrome 版本是理想情况下我们希望在任何地方都能看到的样式。

这是因为,默认情况下,Firefox 中的所有占位符都应用了不透明度值,因此为了解决此问题,我们需要重置该值。

::-moz-placeholder {
  opacity: 1;
}

您可以通过在 Firefox 中测试此演示来了解更多信息。

支持的样式

伪元素支持这些属性的样式设置。

  • font 属性
  • 颜色
  • background 属性
  • 字间距
  • 字母间距
  • 文本装饰
  • 垂直对齐
  • 文本转换
  • 行高
  • 文本缩进
  • 不透明度

伪类也支持大多数(如果不是全部)这些属性,但由于上述原因,它没有那么灵活。

浏览器支持

此浏览器支持数据来自Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
5719*7910.1

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712710.3

其他资源