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

Question

我必须在HTML5验证中为chrome中的input元素带来红色边框，就像Firefox一样。

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

谢谢。

Answer 1

您使用:valid伪类。

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

中的代码

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试添加＆＃39; required＆＃39;在DOM元素中

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