Bootstrap: Disabled custom checkboxes and radio buttons cursor looks clickable

[TheSharpieOne]

• Operating system and version: Mac OS X 10.11
• Browser and version: Chrome 55, Firefox 50, Safari 10

Go to https://v4-alpha.getbootstrap.com/components/forms/#disabled hover over the disabled checkbox. Notice the cursor.

History: #17918

[RusinovAnton]

FYI Pointer is not changing because of pointer-events: none property

[TheSharpieOne]

Yes, but would the solution be to remove it from .custom-control-indicator (~not sure why it was added there~ #18887) or to override it in .custom-control-input:disabled~.custom-control-indicator (such as setting it to inherit or back to auto)?

[RusinovAnton]

@TheSharpieOne seems like pointer-events: none makes no sense because it is still impossible to check disabled checkbox by clicking on .custom-control-indicator without it.

[TheSharpieOne]

Fixing this causes the visual issue describe on https://github.com/twbs/bootstrap/issues/17918#issuecomment-148997105

It is a shame the cursor:not-allowed; is applied separately to the element and the label, and not the entire hitbox (e.g. there is a gap between the element and label where the normal cursor is shown). This is again a consequence of not being able to style the parent control (the form-group div) based on the child's state. (Without non-trivial changes to the html.)

Which really begs the question, why is this different than other checkboxes and radios when it is disabled. The regular checkboxes and radios have .disable on a parent element and that is fine, but here it is considered as "non-trivial changes to the html"

[RusinovAnton]

@TheSharpieOne but look, when I want to control disabled attribute for my checkbox with Javascript I'd rather add it for input itself than adding .disable on a parent element.

[TheSharpieOne]

@RusinovAnton Same, but that is not how the standard controls work. Consistency is king.

[CyrilWork]

noob question: Is there a selector to select parent node ?

like input[disabled] < label

[TheSharpieOne]

That question would probably be best for stackoverflow.... but...
CSS4 has $ (not sure what the actual feature is called) which allows you to apply the styles to parent elements. such as $label > input[disabled] would apply the styles to a label which has a direct child of input[disabled]

[RusinovAnton]

@mdo how that #21812 fixes this issue? I've just tested and the problem is still present.

[patrickhlauke]

Reopening because although the mouse cursor now doesn't change to the hand / cursor:pointer (following #21812), it's still true that the cursor: not-allowed isn't shown when on the control itself

[mdo]

Doh, you're right. Thanks for commenting @RusinovAnton and reopening @patrickhlauke.

[mdo]

This is caused by the pointer-events: none added in #18935. Unsure how best to proceed if we have that; there's no option of setting a cursor unless we remove it.

[chiraggmodi]

what if we add pointer-events:auto to class .custom-control-input:disabled ~ .custom-control-indicator

[mdo]

This looks fine in Safari 10 now. Closing out.