Bootstrap 4禁用状态自定义控件光标问题：自定义样式失效求助

我之前也踩过这个坑！Bootstrap的Custom-Control组件（复选框、单选按钮）在禁用状态下，默认样式的优先级或者元素结构很容易让自定义光标样式失效，下面给你几个实用的解决思路：

1. 瞄准正确的元素设置样式 #

Custom-Control里的原生<input>是隐藏的，用户实际点击/ hover的是对应的<label>标签。所以你需要给禁用input对应的label设置光标样式，而不是直接给input设置：

/* 针对禁用状态的复选框/单选按钮标签设置光标 */
.custom-control-input:disabled ~ .custom-control-label {
    cursor: not-allowed; /* 替换成你需要的光标样式，比如default、no-drop等 */
}

2. 提升选择器优先级 #

如果上面的样式还是不生效，大概率是Bootstrap默认样式的优先级更高。你可以通过更具体的选择器来覆盖：

/* 增加父元素选择器提升优先级 */
.container .custom-control-input:disabled ~ .custom-control-label {
    cursor: not-allowed;
}

紧急情况下可以临时用!important（尽量少用，优先优化选择器）：

.custom-control-input:disabled ~ .custom-control-label {
    cursor: not-allowed !important;
}

3. 检查Disabled属性是否正确设置 #

确保你是给原生input元素添加了disabled属性，而不是只给父容器或label加：

<!-- 正确的禁用示例 -->
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="disabledCheckbox" disabled>
    <label class="custom-control-label" for="disabledCheckbox">禁用的复选框</label>
</div>

如果是单选按钮组，也要确保每个禁用的input都单独加上disabled属性。

4. 自定义组件结构适配 #

如果是你自己封装的Custom-Control组件（不是原生Bootstrap结构），需要根据实际DOM结构调整选择器。比如如果input嵌套在label里，可以用:has()选择器（现代浏览器支持）：

.custom-control-label:has(.custom-control-input:disabled) {
    cursor: not-allowed;
}

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