HTML默认验证消息样式

Question

我知道默认的验证消息文本可以这样编辑

更改默认HTML输入验证消息

但我想知道是否有一种方法将CSS作为默认验证消息框的目标

我真的很喜欢默认的验证，这是一个研究问题，我看了我的浏览器控制台尝试目标验证消息框。但浏览器并不接收它。

假设我想将验证消息的背景设置为蓝色而不是白色，或者我想更改字体大小。是否有任何was针对这些验证消息框CSS？

Answer 1

您可以创建自己的“message”元素。

在链接到的示例的基础上，可以添加e.preventDefault()来停止显示有效性消息的默认操作，然后显示您自己的元素。

null

js lang-js prettyprint-override">let name = document.forms.form01.name;
let message = document.getElementById('message');

name.addEventListener("invalid", function(e){
  e.preventDefault();
  message.style.display = "block";
});

<form name="form01">
  <label for="name">Name</label>
  <input name="name" placeholder="Enter Your Name" type="text" required autocomplete="off">
  <div id="message" style="display:none">Not valid</div>
</form>