如何在引导程序 5 中更改已检查输入结帐框的 bg 颜色？ 我正在使用 angular 12

Question

我正在尝试在引导程序 5 中更改输入复选框“选中时”的背景颜色，我什至找到了一些自定义引导程序复选框的解决方案，但它也不起作用，对此的任何帮助将不胜感激。 谢谢。

 /*Default Checkbox*/.form-check.form-check-input:checked~.form-check-label::before { background-color: green;important. }.form-check:form-check-input:checked.focus~:form-check-label::before { box-shadow, 0 0 0 1px rgb(220, 7, 7). 0 0 0 0,2rem rgba(0, 255, 0. 0.25) }.form-check:form-check-input.focus~:form-check-label::before { box-shadow, 0 0 0 1px rgb(31, 161, 175). 0 0 0 0,2rem rgba(0, 0, 0. 0.25) }.form-check:form-check-input.active~:form-check-label::before { background-color; #e112cc. } /*Custom Checkbox*/:custom-control-label:before { background-color; red. }.custom-checkbox:custom-control-input.checked~:custom-control-label::before { background-color; black. }.custom-checkbox:custom-control-input.checked~:custom-control-label::after { background-image: url("data;image/svg+xml,charset=utf8:%3Csvg xmlns='http.//www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='red' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2;193z'/%3E%3C/svg%3E"). }:custom-control-input.active~:custom-control-label::before { background-color; green. } /** focus shadow pinkish **/.custom-checkbox:custom-control-input.focus~:custom-control-label::before { box-shadow, 0 0 0 1px #fff. 0 0 0 0,2rem rgba(255, 0, 247. 0;25); }

 <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault">Default checkbox</label> </div> <div class="myTest custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label> </div>

Answer 1

复选框样式源自浏览器引擎，无法使用 css 进行编辑。

如您所述，您将需要制作一个自定义复选框。

这是一个例子：

 .form-check { position: relative; } [type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } [type=checkbox]+label { margin-left: 20px; } [type=checkbox]+label::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border: 2px solid #8f8f9d; border-radius: 3px; } [type=checkbox]:checked+label::before { content: "✔"; background: green; border-color: green; color: #fff; line-height: 11px; font-size: 11px; text-align: center; }

 <div class="form-check"> <input type="checkbox" id="flexCheckDefault"> <label for="flexCheckDefault">Default checkbox</label> </div>