:placeholder-shown

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

:placeholder-shown 伪类选择 **输入元素本身**,当表单输入中存在占位符文本时。 可以将其视为区分 **当前显示占位符文本** 和未显示占位符文本的输入的一种好方法。

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

占位符背后的理念

基于文本的 <input><textarea> 输入可以具有占位符文本。 它是当输入为空时显示的文本,用于建议可能的值。 例如,一个要求学校的表单可能有一个标签说明它要求什么,然后在占位符中建议“Forest Hills Example High School”作为示例值

<label for="school">School Name:</label>
<input placeholder="Forest Hills Example High School" type="text" name="school" id="school">

:placeholder-shown::placeholder 之间的区别

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

这是一个图表

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

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

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

Tab Atkins 通过电子邮件为我澄清了这一点

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

如果您需要对占位符文本进行样式设置

使用 ::placeholder (实际上,使用所有针对它的疯狂供应商前缀),我们在年鉴中对此进行了详细说明

更多信息

浏览器支持

此浏览器支持数据来自 Caniuse,其中有更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
475111*799

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271271279.0-9.2