Bootstrap 4 自定义控件光标处于禁用状态
Bootstrap 4 cursor for custom-control in state disabled
我需要其他光标来禁用自定义控件元素(复选框、单选按钮)
这种风格不起作用:
.custom-control-input:disabled ~ .custom-control-label::before {
cursor: not-allowed;
}
对于 Bootstrap 4 中禁用的 custom-control 元素(复选框、单选按钮),您需要以下选择器 css rule/selector:
.custom-control-input:disabled ~ .custom-control-label {
cursor: not-allowed;
}
而且,如果您只想为实际的 checkbox/radio 按钮而不是标签使用自定义光标样式(在这种情况下,不推荐),那么您需要这条规则:
.custom-control-input:disabled ~ .custom-control-label::after {
cursor: not-allowed;
}
单击下面的 "run code snippet" 以查看它是否有效:
<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>
我需要其他光标来禁用自定义控件元素(复选框、单选按钮)
这种风格不起作用:
.custom-control-input:disabled ~ .custom-control-label::before {
cursor: not-allowed;
}
对于 Bootstrap 4 中禁用的 custom-control 元素(复选框、单选按钮),您需要以下选择器 css rule/selector:
.custom-control-input:disabled ~ .custom-control-label {
cursor: not-allowed;
}
而且,如果您只想为实际的 checkbox/radio 按钮而不是标签使用自定义光标样式(在这种情况下,不推荐),那么您需要这条规则:
.custom-control-input:disabled ~ .custom-control-label::after {
cursor: not-allowed;
}
单击下面的 "run code snippet" 以查看它是否有效:
<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>