Sorry to bother you guys again... I've looked everywhere for the answer to this, but I still can't seem to figure it out.
I need to change the text color of the active button in Bootstrap. Basically when you click on one of the buttons it will go from being white to some sort of green color, and I want to change that color. Does anyone have any ideas on how I can do this?
I've tried this in CSS:
.button:focus, .button.active, .button.active:focus { color: white !important; } However, that didn't work.
(And can someone tell me how I can just put code in without the "run code" but it still colors it properly?)
Here's my code:
HTML:
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="" rel="stylesheet" /> <link href="" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <html lang="en"> <div> <div> <ul> <a>Traders: </a> <li> <a aria-expanded="false">General <span></span></a> <ul> <li><a href="#medical">Medical</a></li> <li><a href="#utility">Utility</a></li> <li><a href="#supplies">Supplies</a></li> <li><a href="#banker">Banker</a></li> </ul> </li> <li> <a aria-expanded="false">Vehicles <span></span></a> <ul> <li><a href="#aircraft">Aircraft </a></li> <li><a href="#vehicle">Vehicle </a></li> </ul> </li> <li><a href="#blackmarket">Black Market</a></li> <li><a href="#wholesaler">Wholesaler</a></li> <li><a href="#hero">Hero</a></li> <li><a href="#bandit">Bandit</a></li> </ul> </div> </div> <body></body> </html>CSS:
@media { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } .navbar-custom { color: #262626; background-color: #262626; } .button:hover a{ color: white !important; } .navbar-default { color: #262626; background-color: #262626; border-top: 4px solid red; } .navbar-default .navbar-brand:hover { color: white; } .dropdown:hover a{ color: white !important; } .dropdown-menu > li > a:hover { background-color: #3d3d3d; } } body { background-color: black; } #navbar { width: 100%; }2 Answers
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
.button:focus { font-size: 13px; color:orange; } Depending on which button you are attempting to restyle, you can override the property with a few lines of CSS. The following is some example code:
HTML
<button> Change My Color </button> CSS
.btn-success:active, .btn-success.active { color: blue !important; } This works by overriding the default CSS that Bootstrap employs.
