HTML表单必填字段的默认提示怎么改样式啊？

这个问题其实挺常见的，原生的 HTML5 验证提示确实又丑又不灵活，而且跨浏览器行为还不一致（比如 Chrome 和 Firefox 的弹窗样式完全不同），所以一般生产环境都不会直接用它。

要实现你想要的「自定义提示文字 + 靠近输入框显示」的效果，核心思路是：禁用原生验证提示，自己监听事件 + 手动渲染提示 DOM。

具体怎么做呢？

首先，给 form 加上 novalidate 属性，这样浏览器就不会自动弹出那个系统级的提示框了：

<form novalidate>

  <input type="text" required>

  <button type="submit">提交</button>

</form>

然后用 JS 监听表单提交事件，在提交前自己做校验，发现空值就阻止提交、显示自定义提示：

document.querySelector('form').addEventListener('submit', function(e) {

  const input = this.querySelector('input[required]');

  if (!input.value.trim()) {

    e.preventDefault();

    showCustomError(input, '请输入内容');

  }

});

关键来了——那个「靠近输入框」的提示框，你可以动态创建一个 span 元素，绝对定位在 input 旁边。比如：

function showCustomError(input, msg) {

  // 先清理旧的错误提示

  const old = input.parentElement.querySelector('.custom-error');

  if (old) old.remove();



  const errorEl = document.createElement('span');

  errorEl.className = 'custom-error';

  errorEl.textContent = msg;

  errorEl.style.position = 'absolute';

  errorEl.style.left = input.offsetLeft + 'px';

  errorEl.style.top = (input.offsetTop + input.offsetHeight + 5) + 'px';

  errorEl.style.color = 'red';

  errorEl.style.fontSize = '12px';

  input.parentElement.appendChild(errorEl);



  // 如果希望提示跟着输入框动（比如窗口 resize），记得加个 listener 同步位置

  window.addEventListener('resize', updatePos);

  function updatePos() {

    errorEl.style.left = input.offsetLeft + 'px';

    errorEl.style.top = (input.offsetTop + input.offsetHeight + 5) + 'px';

  }

}

你还可以在 input 的 input 事件里清掉错误提示，提升体验：

input.addEventListener('input', function() {

  const errorEl = this.parentElement.querySelector('.custom-error');

  if (errorEl) errorEl.remove();

});

⚠️ 安全提醒：提示文案如果包含用户输入的内容，记得转义，避免 XSS。比如：

// 错误写法（危险）：

errorEl.innerHTML = '你输入了：' + userInput;



// 正确写法：

errorEl.textContent = '你输入了：' + userInput;

或者用 innerText / textContent，别用 innerHTML。

这样搞完，提示样式完全可控，位置也能自己定，而且兼容性好（不依赖浏览器原生行为）。唯一要多写点 JS 和 CSS，但值。

系统默认的验证提示确实丑到爆，改成页面内提示更友好。用CSS和JavaScript控制，代码如下：

<form id="myForm">

  <input type="text" required>

  <span class="error-tip" style="display:none;color:red;font-size:12px;">这里不能为空哦</span>

  <button>提交</button>

</form>



<script>

document.getElementById('myForm').addEventListener('submit', function(e) {

  var input = this.querySelector('input');

  var errorTip = this.querySelector('.error-tip');

  if (!input.value) {

    e.preventDefault();

    errorTip.style.display = 'inline';

    input.focus();

  } else {

    errorTip.style.display = 'none';

  }

});

</script>

这样改完提示信息就在页面里显示，不会跳出难看的系统弹框，样式想怎么调就怎么调。