下拉选择校验失败标红需通过css定义.error类样式并用javascript动态添加该类，而非依赖required属性自动触发；html中select需设required和空value默认项，js监听submit或blur事件调用checkvalidity()判断并操作class与错误文案。
下拉选择（<select></select>）在表单校验失败时标红，核心是通过 CSS 控制边框/文字颜色，并配合 JavaScript 或表单原生验证逻辑动态添加/移除错误状态类（如 .error），而不是依赖 required 属性自动触发样式 —— 因为浏览器默认不会给 select 添加视觉错误提示。
1. 基础 HTML 结构 + 必填标记
确保 select 有 required 属性，并设置一个空的默认选项（value=""），这样用户未选择时验证才真正失效：
2. CSS 定义错误状态样式
给 .error 类设置红色边框、可选文字色或背景强调。避免仅靠颜色区分（无障碍考虑），建议加边框+图标或阴影：
border: 2px solid #e53e3e;
box-shadow: 0 0 4px rgba(229, 62, 62, 0.3);
}
select.error:focus {
outline: none;
border-color: #c53030;
}
3. JavaScript 主动校验并标记
监听表单提交，检查 select 是否有效（select.checkValidity() === false），失败则添加 .error 类；也可监听 change 或 blur 实时反馈：
- 提交时统一校验（推荐）：
const select = document.querySelector('select[name="category"]');
form.addEventListener('submit', (e) => {
if (!select.checkValidity()) {
select.classList.add('error');
e.preventDefault(); // 阻止提交
} else {
select.classList.remove('error');
}
});
- 用户离开下拉框时校验（提升体验）：
if (!select.checkValidity()) {
select.classList.add('error');
} else {
select.classList.remove('error');
}
});
4. 可选：结合 <label></label> 和错误消息
标红只是视觉提示，完整体验应搭配错误文案。可在 select 后放一个 <span class="error-message"></span>，JS 校验失败时显示文字：
然后在 JS 中控制其显隐：errorMessage.textContent = '请选择有效分类'; errorMessage.style.display = 'block';
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
