Bootstrap 4 Validate Form Удалить красное свечение

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

У всех, кто сталкивался с подобными проблемами, моя проблема была с HTML5 и FireFox.Я использовал это, чтобы решить проблему

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

}

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

Попробуйте это:

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