:placeholder-shown

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

:placeholder-shown CSS 伪类表示当前显示占位符文本的任何 <input> 或 <textarea> 元素。

尝试一下

label {
  display: block;
  margin-top: 1em;
}

input:placeholder-shown {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

<form>
  <label for="name">Full Name:</label>
  <input id="name" name="name" type="text" />

  <label for="email">Email Address:</label>
  <input id="email" name="email" type="email" placeholder="name@example.com" />

  <label for="age">Your age:</label>
  <input
    id="age"
    name="age"
    type="number"
    value="18"
    placeholder="You must be 18+" />
</form>

语法

css
:placeholder-shown {
  /* ... */
}

示例

基础示例

该示例中，输入框在显示占位符时将应用特殊字体和边框样式。

HTML

html
<input placeholder="在这里输入一些东西！" />

CSS

css
input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}

结果

文本溢出

当表单字段太小时，占位文本可能会以不良方式被裁剪。你可以使用 text-overflow 属性来更改溢出文本的显示方式。

HTML

html
<input id="input1" placeholder="名字、排行和序号" /> <br /><br />
<input id="input2" placeholder="名字、排行和序号" />

CSS

css
#input2:placeholder-shown {
  text-overflow: ellipsis;
}

结果

自定义输入框

以下示例使用自定义样式突出显示了学生 ID 字段。

HTML

html
<form id="test">
  <p>
    <label for="name">输入学生姓名：</label>
    <input id="name" placeholder="学生姓名" />
  </p>
  <p>
    <label for="branch">输入学生分会：</label>
    <input id="branch" placeholder="学生分会" />
  </p>
  <p>
    <label for="sid">输入学生 ID：</label>
    <input
      type="number"
      pattern="[0-9]{8}"
      title="8 digit ID"
      id="sid"
      class="studentid"
      placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>

CSS

css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}

结果

规范

Specification
HTML
# selector-placeholder-shown
Selectors Level 4
# placeholder-shown-pseudo

浏览器兼容性

参见