twitter bootstrap - CSS button state weirdness - held click state? -
i've got hover, active, , focus states covered, when click on button , hold, color (dark blue) can't seem override. there button state don't know about?
https://jsbin.com/kutavovora/edit?html,css,output
.btn-primary { background: #f00; &:hover, &:focus, &:active, &.active { background: #0f0; } }<!doctype html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <meta charset="utf-8"> <title>js bin</title> </head> <body> <a class="btn btn-primary btn-lg">click , hold</a> </body> </html>
that happening because using bootstrap, , have defined following styles:
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover { color: #fff; background-color: #204d74; border-color: #122b40; } edit:
if want override styles, need use more specific selector (.btn.btn-primary instead .btn-primary only), like:
.btn.btn-primary { background: #f00; &:hover, &:focus, &:active, &.active { background: #0f0; } }
Comments
Post a Comment