Привет! В настоящее время я использую начальный загрузчик 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