如何设置表单未填触发的data-error的font-family样式？

嘿，我明白你现在卡在给未填写字段切换时的data-error提示设置样式这儿了——先给你点个赞，placeholder的跨浏览器兼容样式已经搞定得相当到位了！下面我给你几种常见场景的解决方案，你可以根据自己的实际情况来选：

情况1：data-error作为属性，用伪元素展示提示 #

如果你的data-error是通过input的属性存储，打算用CSS伪元素来渲染提示文本，这里要注意：input属于替换元素，部分浏览器不支持直接给它加伪元素，所以更稳妥的方式是给input套一个容器，然后用容器的伪元素来显示错误提示：

/* 给input的父容器设置相对定位，方便伪元素定位 */
.input-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
}

/* 当input存在data-error属性且不为空时，显示错误提示 */
.input-wrapper input[data-error]:not([data-error=""]) + .error-hint::after {
  content: attr(data-error);
  position: absolute;
  bottom: -20px;
  left: 0;
  color: #dc3545; /* 错误提示常用红色，可自行修改 */
  font-family: 'Indie Flower', sans-serif; /* 和placeholder字体统一 */
  font-size: 0.9rem;
  line-height: 1.2;
}

/* 默认隐藏提示容器，有错误时才显示 */
.error-hint {
  display: none;
}
.input-wrapper input[data-error]:not([data-error=""]) + .error-hint {
  display: block;
}

对应的HTML结构参考：

<div class="input-wrapper">
  <input type="text" required placeholder="请输入内容" data-error="这个字段不能为空哦！">
  <span class="error-hint"></span>
</div>

情况2：data-error是独立的提示元素 #

如果你的错误提示是一个单独的DOM元素（比如<p data-error="..."></p>），那直接选中这个带data-error属性的元素设置样式就好：

/* 选中所有带data-error属性的元素 */
[data-error] {
  color: #dc3545;
  font-family: 'Indie Flower', sans-serif;
  font-size: 0.875rem;
  margin-top: 0.3rem;
  font-style: italic; /* 可选：给提示加个斜体样式 */
}

/* 只有当data-error有内容时才显示 */
[data-error]:empty {
  display: none;
}

注意：HTML5原生表单验证的提示框 #

如果你是用HTML5的required属性触发的原生验证提示框（浏览器自带的弹出框），这种样式很难直接修改——浏览器对原生提示框的样式限制很严。这时候更推荐你禁用原生验证，自己用JS来控制data-error的显示/隐藏，然后用上面的自定义CSS来美化：

// 给表单禁用原生验证
const form = document.querySelector('your-form-selector');
form.noValidate = true;

// 监听输入框失焦事件，判断是否为空
document.querySelectorAll('input[required]').forEach(input => {
  input.addEventListener('blur', () => {
    if (!input.value.trim()) {
      input.setAttribute('data-error', '请填写这个必填字段！');
      input.style.borderColor = '#dc3545'; // 给input加边框提示
    } else {
      input.removeAttribute('data-error');
      input.style.borderColor = '';
    }
  });
});

// 提交表单时再做一次全局校验
form.addEventListener('submit', (e) => {
  let hasError = false;
  document.querySelectorAll('input[required]').forEach(input => {
    if (!input.value.trim()) {
      input.setAttribute('data-error', '这个字段不能为空！');
      input.style.borderColor = '#dc3545';
      hasError = true;
    }
  });
  if (hasError) {
    e.preventDefault(); // 阻止表单提交
  }
});

这样你就能完全掌控data-error提示的样式，和已设置好的placeholder字体也能保持统一~

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