如何修改Bootstrap复选框中勾选标记"✓"的颜色？

你在使用Bootstrap的复选框组件时，想要修改勾选标记的颜色，但遇到了自定义黑色对勾后方还显示Bootstrap默认白色对勾的问题，同时不想过度覆盖现有样式。

问题根源 #

Bootstrap的.form-check-input:checked默认使用背景图片渲染对勾图标，这就导致你通过:after伪元素添加的自定义对勾会和默认背景图重叠，出现双对勾的情况。

解决方案 #

只需要针对Bootstrap的复选框，在勾选状态下移除默认背景图，同时保留你自定义的对勾样式即可，不会影响其他Bootstrap原有样式：

/* 保留你原有的动画和焦点样式 */
@keyframes shadowAnimation {
  0% {
    box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.9);
  }
  100% {
    box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.1);
  }
}

.animate-checkbox {
  animation: shadowAnimation 1s ease-in-out;
}

input[type="checkbox"].form-check-input:focus-visible,
input[type="checkbox"].form-check-input:focus {
  border-color: #212529;
  border: var(--bs-border-width) solid #ff9800 !important;
}

/* 新增/修改：处理Bootstrap勾选标记冲突 */
input[type="checkbox"].form-check-input:checked {
  background-color: #ff9800;
  /* 移除Bootstrap默认的对勾背景图 */
  background-image: none;
}

input[type="checkbox"].form-check-input:checked:after {
  content: "\2713";
  color: #212529;
  /* 确保对勾居中显示 */
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: 1.2;
}

补充说明 #

• background-image: none直接清除了Bootstrap默认的对勾背景图，彻底解决重叠问题
• 完全保留了你想要的橙色背景和黑色对勾样式
• 额外添加的居中样式，确保对勾显示位置对齐
• 选择器用.form-check-input限定范围，不会影响项目中其他非Bootstrap的复选框

如果自定义样式优先级不够，可以通过提升选择器权重或者添加!important来强制生效（优先用选择器权重提升）：

input[type="checkbox"].form-check-input:checked {
  background-color: #ff9800 !important;
  background-image: none !important;
}

内容的提问来源于stack exchange，提问作者ma4stro