如何覆盖input[type=checkbox]的CSS规则？Bootstrap下内联样式不生效原因

• 优先级更高的带!important声明的规则覆盖了你的内联样式
  不管是你自定义的全局input[type=checkbox]规则，还是Bootstrap框架自带、或你二次修改过的.form-check-input类规则，只要对应的display: none属性后面加了!important声明，优先级就会高于普通的内联样式，导致你写的style="display:block;"不生效。
• 组件结构不符合Bootstrap规范
  Bootstrap的复选框组件要求.form-check-input必须嵌套在带有.form-check类的父容器内才能正常生效，如果你直接单独使用该类，可能会触发异常的隐藏逻辑。

1. 打开浏览器开发者工具的「元素」面板，选中当前复选框元素，在样式列表中找到生效的display: none规则，确认其来源和是否携带!important标记
2. 如果是规则携带!important导致的覆盖，将你的内联样式修改为style="display:block !important;"即可正常覆盖
3. 如果是组件结构问题，给复选框外层加一层<div class="form-check"></div>容器即可

内容的提问来源于stack exchange，提问作者János