Question

我需要其他光标来禁用自定义控件元素（checkbox，radiobutton）

这种风格不起作用：

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

Answer 1

对于Bootstrap 4中的禁用自定义控件元素（复选框，单选按钮），您需要以下选择器css规则/选择器：

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

如果您想要自定义光标样式仅用于实际的复选框/单选按钮而不是标签（在这种情况下不推荐），那么您需要此规则：

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

点击下面的“运行代码段”，看它是否有效：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<style>
.custom-control-input:disabled~.custom-control-label {
    cursor: not-allowed;
}
</style>

<form class="m-3">
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
        <label class="custom-control-label" for="customRadioInline1">This custom radio is OK</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
        <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input" disabled>
        <label class="custom-control-label" for="customRadioInline2">This one is disabled</label>
    </div>
    
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">This custom checkbox is OK</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck2">
        <label class="custom-control-label" for="customCheck2">OK too</label>
    </div>
    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
        <label class="custom-control-label" for="customCheckDisabled">This custom checkbox is disabled</label>
    </div>
    
</form>

用于自定义控制的Bootstrap 4游标处于禁用状态

1 个答案: