Angular 5部署后Bootstrap 4自定义复选框背景图不显示

嘿，我来帮你排查这个问题！你遇到的勾选背景图不显示的情况，主要是因为Bootstrap 4的自定义表单控件结构没有正确遵循——你把form-check系列的类和custom-control系列的类混在一起用了，这两个是不同的组件体系，样式会互相冲突，导致自定义的勾选背景无法正常渲染。

问题出在你的DOM结构上 #

你当前的代码混用了两类组件的类：

<label class="form-check-label custom-checkbox"> 
  <input class="form-check-input custom-control-input" type="checkbox"> 
  <span class="custom-control-indicator"></span> 
  <span> Some Text Here </span> 
</label>

form-check是Bootstrap用于增强原生复选框样式的组件，而custom-control是完全自定义样式的组件，两者的DOM结构和类名不能混用。

正确的自定义复选框结构 #

Bootstrap 4的自定义复选框需要严格按照以下结构编写：

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="myCustomCheckbox">
  <label class="custom-control-label" for="myCustomCheckbox">Some Text Here</label>
</div>

这里需要注意几个关键点：

• 外层用custom-control custom-checkbox包裹整个复选框组件
• 复选框input添加custom-control-input类，并且设置唯一的id
• 标签label使用custom-control-label类，通过for属性和input的id关联（这样点击文本也能触发复选框状态切换）
• 不需要额外的custom-control-indicator元素——Bootstrap会通过CSS伪元素自动生成自定义的勾选指示器和背景

额外检查项 #

确保你已经正确引入了Bootstrap 4的CSS文件：

• 如果是通过npm安装的Bootstrap，在Angular的styles.css中添加：

  @import "~bootstrap/dist/css/bootstrap.min.css";
  

  或者在angular.json的styles数组里配置引入路径。

替换成上面的正确结构后，自定义复选框的勾选背景图应该就能正常显示了！

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