Bootstrap 4 表单更改复选框有效样式
[英]Bootstrap 4 form change checkbox valid style
问题描述
嗨，目前我正在使用 bootstrap 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自定义class，这会导致验证成功时出现绿色边框和绿色文本，即：
.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 文件中不起作用
2 个解决方案
解决方案1
0 2019-10-10 08:02:57
在您的代码中，您在整个表单中添加了“已验证”。 尝试删除form.classList.add('was-validated')并且您还应该清除缓存以确保您的浏览器没有缓存以前的 styles。
解决方案2
0 2019-10-10 08:28:54
我发现了为什么由于我正在处理 django 项目，我需要清除浏览器缓存以查看 css 更改的反映，此问题中解释了此问题ZC7A628CBA22E28EB17B5F5F5C6AE2A2666AZ157ADBZABBCAFA3 文件
清除缓存后，我刷新页面，现在我看到了更改，所以我使用的 css 是正确的
在Bootstrap中更改表单样式以进行验证
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.