HTML中设置必填样式与required伪类的用法
在HTML表单开发中，经常需要标记某些输入项为必填项，并为其添加特定的视觉样式，提示用户必须填写内容。原生HTML提供了required属性来标记必填字段，同时CSS也提供了对应的:required伪类，用于为这些必填字段设置专属样式。本文将详细介绍相关用法。
一、HTML必填属性的基础设置
HTML5为表单输入元素新增了required布尔属性，只要为表单元素添加该属性，就表示该字段为必填项。当表单提交时，如果必填字段未填写内容，浏览器会自动阻止提交并给出默认的提示。
支持required属性的常见表单元素包括：<input>（文本、邮箱、密码等类型）、<textarea>、<select>。
以下是一个简单的必填表单示例：
<form action="https://www.ipipp.com/submit" method="post"> <p> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> </p> <p> <label for="desc">个人简介：</label> <textarea id="desc" name="desc" required></textarea> </p> <p> <button type="submit">提交</button> </p> </form>
运行上述代码后，当用户未填写必填字段直接点击提交按钮时，浏览器会弹出提示，要求用户填写对应内容，这是required属性自带的验证能力。
二、:required伪类的用法
:required是CSS3新增的伪类选择器，用于选中所有带有required属性的表单元素，开发者可以通过它为必填字段设置自定义样式，和默认的浏览器提示区分开，提升用户体验。
1. 基础样式设置
最常见的用法是为必填字段的边框、背景等添加特殊样式，同时可以在标签旁添加必填标记。示例代码如下：
/* 为所有必填表单元素设置红色边框 */
:required {
border: 2px solid #ff4444;
background-color: #fff5f5;
padding: 8px;
border-radius: 4px;
}
/* 为必填项的label添加红色星号标记 */
label:has(+ :required)::after {
content: " *";
color: #ff4444;
font-weight: bold;
}将上述CSS和前面的HTML表单结合后，所有必填的输入框和文本域都会显示红色边框，对应标签后会自动添加红色星号，用户一眼就能识别出必填项。
2. 结合其他伪类增强交互
:required伪类还可以和其他表单相关伪类结合使用，比如:focus、:valid、:invalid，实现更丰富的交互效果。
示例：当必填字段获得焦点时改变边框颜色，填写符合要求时恢复默认样式：
/* 必填字段获得焦点时的样式 */
:required:focus {
border-color: #ffaa00;
outline: none;
box-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
}
/* 必填字段填写有效内容时的样式 */
:required:valid {
border-color: #00aa00;
background-color: #f5fff5;
}三、配套的:optional伪类
和:required对应的是:optional伪类，用于选中所有没有required属性的可选填表单元素，开发者可以用它为可选字段设置不同的样式，和必填字段形成区分。
示例代码如下：
/* 可选填表单元素的样式 */
:optional {
border: 2px solid #cccccc;
padding: 8px;
border-radius: 4px;
}
/* 可选填项的label添加可选标记 */
label:has(+ :optional)::after {
content: "（可选）";
color: #666666;
font-size: 0.9em;
}四、注意事项
required属性是布尔属性，不需要设置值，只要出现在标签中就生效，比如<input required>和<input required="required">效果一致。:required伪类的兼容性：主流现代浏览器都支持该伪类，包括Chrome、Firefox、Edge、Safari，无需添加浏览器前缀。浏览器的默认验证提示样式不同，如果需要统一提示样式，可以配合JavaScript的
setCustomValidity方法自定义提示内容，但:required伪类的样式设置不受浏览器默认提示影响。不要依赖
required属性做唯一的前端验证，服务器端也需要对必填字段做二次校验，避免恶意绕过前端验证提交空数据。
五、完整示例
以下是一个包含必填样式、可选样式和交互效果的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>必填样式示例</title>
<style>
:required {
border: 2px solid #ff4444;
background-color: #fff5f5;
padding: 8px;
border-radius: 4px;
}
:required:focus {
border-color: #ffaa00;
outline: none;
box-shadow: 0 0 5px rgba(255, 170, 0, 0.3);
}
:required:valid {
border-color: #00aa00;
background-color: #f5fff5;
}
:optional {
border: 2px solid #cccccc;
padding: 8px;
border-radius: 4px;
}
label:has(+ :required)::after {
content: " *";
color: #ff4444;
font-weight: bold;
}
label:has(+ :optional)::after {
content: "（可选）";
color: #666666;
font-size: 0.9em;
}
.form-group {
margin-bottom: 15px;
}
</style>
</head>
<body>
<form action="https://www.ipipp.com/submit" method="post">
<div class="form-group">
<label for=">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="phone">手机号</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="desc">个人简介</label>
<textarea id="desc" name="desc"></textarea>
</div>
<button type="submit">提交</button>
</form>
</body>
</html>通过上述方法，就可以快速实现HTML必填字段的样式设置和:required伪类的灵活应用，既提升了表单的易用性，也保证了视觉风格的统一。