如何在Chrome中的必填或无效值输入元素上显示红色边框，就像用于HTML5验证的Firefox行为一样？

Question

我必须像Firefox一样在HTML5验证上的chrome中的输入元素周围带红色边框。

我已经搜索了很多，但是找不到精确的答案。非常感谢使用css进行操作的任何帮助。

谢谢。

Answer 1

您使用:valid伪类。

要无耻地从https://developer.mozilla.org/en-US/docs/Web/CSS/:valid复制代码：

input:invalid {
  background-color: #ffdddd;
}
form:invalid {
  border: 5px solid #ffdddd;
}
input:valid {
  background-color: #ddffdd;
}
form:valid {
  border: 5px solid #ddffdd;
}
input:required {
  border-color: #800000;
  border-width: 3px;
}

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>