Disabled buttons with .active are incorrectly styled by :hover styles
Created by: toby-howell
The following CSS is what is applied when a button.btn.btn-secondary.active[disabled]
is hovered over:
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #FFFFFF;
border-color: #CCCCCC;
}
This overrides declarations applied by .active
:
.btn-secondary.active, .btn-secondary:active, .open > .btn-secondary.dropdown-toggle {
background-color: #E6E6E6;
border-color: #ADADAD;
/* ... */
}
This makes the button appear to be responsive to the user's interaction, despite it being disabled.
An example of the change needed is as follows:
.btn-secondary.active.disabled:hover, .btn-secondary.active:disabled:hover {
background-color: #E6E6E6;
border-color: #ADADAD;
}
- Operating system: Windows 10 Pro x64
- Browser: Chrome 54.0.2840.99 m
- Test case and workaround: https://jsbin.com/fakejeyero
Although I used .btn-secondary
as an example, this affects all similarly coloured button styles, as well as other button styles, such as outline buttons (although I have not exhaustively tested other styles). This issue was encountered in Bootstrap v4.0.0-alpha.5.