Question

我在表单组中有2个表单字段

<form action="" method="post" was-validated>
<div class="form-group">
  <label>Email address:</label>
  <input type="text" class="form-control" name="email" required>
</div>
<div class="form-group">
  <label>Password:</label>
  <input type="password" class="form-control" name="password" required>
</div>
<button type="submit">Login</button>

如果未输入任何内容并提交了表单，则两个输入均显示红色。

我可以使用哪个CSS类来更改它？

我尝试过：

.form-control: is-invalid {
    background: red;
}

任何帮助将不胜感激。

Answer 1

尝试一下：

.form-control {
    outline: none;
    box-shadow:none !important;
    border:1px solid #ccc !important;
}

Answer 2

编辑：我误解了最初的问题。我已更新，从输入中删除“红色发光”。

编辑2：也删除了轮廓

尝试一下：

.was-validated .form-control:invalid,
.was-validated .form-control:invalid:focus {
    box-shadow: none;
    outline: none;
}

Answer 3

这应该有效：

.form-control:invalid {
    outline: none;
}

Answer 4

任何有类似问题的人，我的问题都与HTML5和FireFox有关。我用它来解决问题

:-moz-ui-invalid:not(output) {

}

Bootstrap 4验证表单删除红色发光

4 个答案: