Bootstrap 4：如何更改复选框的颜色？简单方法

Question

<div class="modal-footer">
    <label class="checkbox-inline pull-left" for="rme"><input type="checkbox" class="custom-checkbox checkbox-primary" id="rme"> Remember me</label>
    <input type="submit" class="btn btn-success pull-right" value="Login">
</div>

如何修改同样的代码，使复选框背景颜色变为绿色。

- Saoud ElTelawy

---

你可能想要摆脱默认的浏览器组件来进行自定义，可以查看 https://www.w3schools.com/howto/howto_css_custom_checkbox.asp。 - ecarrizo

谢谢，我会检查这个 :) - Saoud ElTelawy

Answer 1

您已经在使用Bootstrap的"自定义"表单控件（尽管稍微有些不正确 - Bootstrap 4自定义控件的标记与您的示例不同）。

这是Bootstrap 4自定义复选框的正确标记：

<div class="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>

自定义外观由custom-* CSS类控制。如您所见，缺省颜色为Bootstrap的主要"蓝色"。如果要使其变成绿色，则需要覆盖或添加自己的自定义CSS类。以下是一个示例，使用了一个新类，以便如果您仍然想有时使用默认的蓝色，就可以这样做。

.custom-control-input-green:focus~.custom-control-label::before {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.custom-control-input-green:checked~.custom-control-label::before {
  border-color: #28a745 !important;
  background-color: #28a745 !important;
}

.custom-control-input-green:focus:not(:checked)~.custom-control-label::before {
  border-color: #5bd778 !important;
}

.custom-control-input-green:not(:disabled):active~.custom-control-label::before {
  background-color: #d6f5dd !important;
  border-color: #d6f5dd !important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="custom-control custom-checkbox custom-checkbox-green">
  <input type="checkbox" class="custom-control-input custom-control-input-green" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

- Cᴏʀʏ

Answer 2

Saoud，你查看了W3Schools上的这个教程吗？

你有很多选项可以做到这一点。此外，一些框架有自己的复选框样式。

例子：

• Materialize
• Foundation Switch Buttons
• UIKit Custom Controls

主要是在这些情况下覆盖默认的复选框行为和外观，并使用图像或颜色。

- Mihail Minkov

---

谢谢，Mihail。我还在学习中，想要使用Bootstrap，所以我会先查看W3schools。此外，我已经尝试了许多方法来覆盖它，但是没有希望。只是一个问题，我可以在Bootstrap项目中使用一些Materialize吗？ - Saoud ElTelawy

嗯，混合使用前端框架并不是一个好主意，你可能会遇到样式冲突的问题。你可以复制复选框结构并复制和修改样式。通常在自定义时，它们会使用一些额外的HTML代码作为span，这取决于输入的选中状态。 - Mihail Minkov

Answer 3

将"accent-color"添加到该类中。

.custom-checkbox {
color: green;
accent-color: currentcolor;
}

- Puzzlemaster

---

提交代码时，请调整您的代码，以便直接回答问题。在 OP 的代码中没有 checkbox_color 类。 - General Grievance

请在您的答案中添加说明如何使用您提出的解决方案。 - Dom