Question

您好，我目前正在使用引导程序4进行表单验证，在复选框字段中，用户单击提交后，如果复选框为勾号，则表示该复选框有效，并且带有边框的文本将变为绿色＃28a745。

但是目前，如果有效，我不想将框和文本的边框颜色更改为绿色：

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-control-input:checked~.custom-control-label::before {
  background-color: #495C83 !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <title>Test Page</title>
</head>

<body>
  <form class="container needs-validation" novalidate>
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" name="remember_me" class="custom-control-input" tabindex="3" id="remember-me" checked="">
        <label class="custom-control-label" for="remember-me">Nhớ đăng nhập</label>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary btn-lg btn-block" tabindex="4">
                      Đăng Nhập
                    </button>
    </div>
  </form>
</body>

忽略我只使用它的javascript部分，以便它显示用户选中后并按提交效果

当前在验证成功后，复选框的文本和边框变为绿色，但我不希望颜色更改

因此，我试图覆盖boostrap自定义类，该类会导致绿色边框和绿色文本在验证成功时是这样的：

.custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label {
    color: #28a745;
}
.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    border-color: #34ce57;
    background-color: #34ce57;
}
.custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before {
    border-color: #28a745;
}

所以我将其更改为：

.custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label {
    color: #495C83 !important;
}
.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
    border-color: #495C83 !important;
    background-color: #495C83 !important;
}
.custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before {
    border-color: #495C83 !important;
}

但是验证后颜色仍然显示为绿色。我不知道为什么这在我的css文件中不起作用

Answer 1

在您的代码中，您向整个表单添加了“已验证”。尝试删除form.classList.add('was-validated')，并且还应该清除缓存，以确保浏览器不缓存以前的样式。

Answer 2

我发现了为什么自从我从事django项目以来，我需要清除浏览器缓存以查看问题css files on django中解释的css更改的反映

清除缓存后，我刷新页面，现在看到更改，因此我使用的CSS是正确的

Bootstrap 4表单更改复选框有效样式

2 个答案: