:placeholder-shown

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

试一试

语法

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

示例

基本示例

此示例在显示占位符时应用特殊的字体和边框样式。

HTML

html
<input placeholder="Type something here!" />

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="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />

CSS

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

结果

自定义输入字段

以下示例使用自定义样式突出显示“学号”字段。

HTML

html
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student 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;
}

结果

规范

规范
选择器级别 4
# 占位符

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅