下拉选择校验失败标红需通过CSS定义.error类样式并用JavaScript动态添加该类，而非依赖required属性自动触发；HTML中select需设required和空value默认项，JS监听submit或blur事件调用checkValidity()判断并操作class与错误文案。

下拉选择（<select>）在表单校验失败时标红，核心是通过 CSS 控制边框/文字颜色，并配合 JavaScript 或表单原生验证逻辑动态添加/移除错误状态类（如 .error），而不是依赖 required 属性自动触发样式 —— 因为浏览器默认不会给 select 添加视觉错误提示。

1. 基础 HTML 结构 + 必填标记

确保 select 有 required 属性，并设置一个空的默认选项（value=""），这样用户未选择时验证才真正失效：

<select name="category" required>
  <option value="">-- 请选择分类 --</option>
  <option value="news">新闻</option>
  <option value="blog">博客</option>
</select>

2. CSS 定义错误状态样式

给 .error 类设置红色边框、可选文字色或背景强调。避免仅靠颜色区分（无障碍考虑），建议加边框+图标或阴影：

select.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 实时反馈：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

• 提交时统一校验（推荐）：

const form = document.querySelector('form');
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');
  }
});

• 用户离开下拉框时校验（提升体验）：

select.addEventListener('blur', () => {
  if (!select.checkValidity()) {
    select.classList.add('error');
  } else {
    select.classList.remove('error');
  }
});

4. 可选：结合 <label> 和错误消息

标红只是视觉提示，完整体验应搭配错误文案。可在 select 后放一个 <span class="error-message">，JS 校验失败时显示文字：

<select name="category" required>...</select>
<span class="error-message" aria-live="polite">请选择有效分类</span>

然后在 JS 中控制其显隐：errorMessage.textContent = '请选择有效分类'; errorMessage.style.display = 'block';