: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 2020年1月.
: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 |
浏览器兼容性
Loading…
参见
::placeholder伪元素为占位符自身设置样式。- 相关的 HTML 元素：
<input>、<textarea> - HTML 表单