在表单开发场景中，我们经常会遇到需要标记必填项的需求，同时还需要通过placeholder给用户提供输入引导。css的:required伪类可以精准选中所有设置了required属性的表单元素，再结合placeholder的样式控制，就能实现更贴合需求的提示效果。
:required伪类基础说明
:required是css3新增的伪类选择器，它的作用是匹配所有设置了required属性的表单元素，常见的适用元素包括<input>、<textarea>、<select>。只要元素添加了required属性，就可以被这个伪类选中，不需要额外添加类名。
下面是一个基础的:required使用示例，给必填的输入框添加红色边框：
/* 选中所有必填的input元素 */
input:required {
border: 2px solid #ff4d4f;
}
/* 选中所有必填的textarea元素 */
textarea:required {
border: 2px solid #ff4d4f;
}
placeholder基础用法回顾
placeholder是html5新增的表单属性，用于在输入框未输入内容时显示提示文本，当输入框获得焦点或者开始输入内容时，提示文本会自动消失。它的使用方式非常简单，直接添加到表单元素上即可：
<input type="text" placeholder="请输入用户名" required> <textarea placeholder="请输入个人简介" required></textarea>
:required配合placeholder的实现方式
两者的配合核心是通过:required伪类选中必填元素后，再修改其placeholder的样式，让必填项的提示文本和选填项形成区分。我们可以通过::placeholder伪元素来控制placeholder的样式，结合:required伪类就能实现精准的样式控制。
基础配合示例
下面的代码会给必填项的placeholder添加红色提示文本，选填项的placeholder保持默认灰色：
/* 选填项placeholder默认样式 */
input::placeholder, textarea::placeholder {
color: #bfbfbf;
font-size: 14px;
}
/* 必填项placeholder样式 */
input:required::placeholder, textarea:required::placeholder {
color: #ff4d4f;
font-weight: bold;
}
对应的html代码：
<form>
<div>
<label>用户名（必填）：</label>
<input type="text" placeholder="请输入用户名" required>
</div>
<div>
<label>昵称（选填）：</label>
<input type="text" placeholder="请输入昵称">
</div>
<div>
<label>个人简介（必填）：</label>
<textarea placeholder="请输入个人简介，不少于20字" required></textarea>
</div>
</form>
进阶：给placeholder添加必填标记
我们还可以在必填项的placeholder文本前自动添加必填标记，不需要手动在每个placeholder里写标记，通过css的伪元素内容插入即可实现：
/* 给必填项的placeholder前添加红色星号 */
input:required::placeholder::before, textarea:required::placeholder::before {
content: "* ";
color: #ff4d4f;
}
需要注意的是，部分浏览器对::placeholder伪元素的content属性支持有限，如果需要兼容更多浏览器，也可以直接在placeholder属性里添加标记，再通过:required伪类控制标记的样式：
<input type="text" placeholder="* 请输入用户名" required> <input type="text" placeholder="请输入昵称">
/* 必填项placeholder里的星号样式 */
input:required::placeholder {
color: #ff4d4f;
}
/* 选填项placeholder样式 */
input:not(:required)::placeholder {
color: #bfbfbf;
}
注意事项
- :required伪类只能选中设置了required属性的元素，没有设置该属性的元素无法被匹配。
- 不同浏览器对
::placeholder伪元素的样式支持有差异，比如部分浏览器不支持修改font-weight，实际使用时需要做兼容性测试。 - 如果表单元素同时设置了required和disabled属性，:required伪类依然会生效，但是用户无法输入内容，这种场景下需要额外处理样式避免误导用户。
这种组合方式可以大幅减少html里的冗余代码，不需要给每个必填项单独添加类名来控制placeholder样式，维护起来更加方便。
css伪类requiredplaceholder表单验证修改时间：2026-06-13 19:21:35