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

【问题标题】：How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?如何在 Chrome 中的必需或无效值输入元素上显示红色边框，就像用于 HTML5 验证的 Firefox 行为一样？
【发布时间】：2015-06-22 08:30:00
【问题描述】：

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

我已经搜索了很多，但无法找到准确的答案。非常感谢任何关于如何使用 css 的帮助。

谢谢。

【问题讨论】：

标签： css html google-chrome firefox

【解决方案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>

【讨论】：

【解决方案2】：

尝试在 DOM 元素中添加“必需”

<input name="heading" type="text" class="form-control" placeholder="heading" maxlength="35" required />

【讨论】：