如何为input元素的validationMessage验证提示信息设置样式？

原生浏览器的表单验证气泡（即你提到的validationMessage对应的提示）属于浏览器原生UI，无法直接通过CSS修改样式。要自定义样式，需禁用默认提示，再自行实现验证逻辑与提示框，具体方法如下：

方法一：拦截默认提交，自定义提示元素 #

1. 构建基础HTML结构：

<form id="emailForm">
  <label for="email">邮箱：</label>
  <input type="email" id="email" required>
  <!-- 自定义提示容器 -->
  <div class="custom-error" id="emailError"></div>
  <button type="submit">提交</button>
</form>

2. 用JS拦截默认验证，手动检查输入并展示自定义提示：

const form = document.getElementById('emailForm');
const emailInput = document.getElementById('email');
const errorElement = document.getElementById('emailError');

form.addEventListener('submit', (e) => {
  // 清除之前的错误提示
  errorElement.textContent = '';
  errorElement.classList.remove('show');

  if (!emailInput.validity.valid) {
    e.preventDefault(); // 阻止表单提交
    // 匹配原生提示逻辑，生成对应文本
    if (emailInput.validity.typeMismatch) {
      errorElement.textContent = `请在邮箱地址中包含@符号。'${emailInput.value}' 缺少@。`;
    } else if (emailInput.validity.valueMissing) {
      errorElement.textContent = '请输入邮箱地址';
    }
    errorElement.classList.add('show');
  }
});

3. 给自定义提示添加CSS样式：

.custom-error {
  display: none;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  padding-left: 0.25rem;
}

.custom-error.show {
  display: block;
}

/* 给错误状态的输入框加样式 */
input[type="email"]:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

方法二：CSS伪元素模拟提示（简单场景） #

若无需动态插入用户输入内容（比如示例中的'John'），可结合:invalid伪类与::after伪元素快速实现固定文本提示：

input[type="email"]:invalid:not(:placeholder-shown):not(:focus) + .error-hint::after {
  content: "请在邮箱地址中包含@符号";
  color: #dc3545;
  font-size: 0.875rem;
  margin-left: 0.5rem;
}

对应HTML需在输入框后添加空容器：

<input type="email" id="email" required>
<span class="error-hint"></span>

内容的提问来源于stack exchange，提问作者engrgolden