raul1ro raul1ro - 5 days ago 5
CSS Question

Bootstrap dropdown button style at focus and unfocus

I use bootstrap and I recorded my problem here

When I focus button dropdown he take other background-color and at unfocus disappear border. What class from css(bootstrap.css) need to edit to put my own colors and make to don't disappear border at unfocus?

<div class="collapse navbar-collapse" id="meniu">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><b>Link</b></a></li>
<li><a href="#"><b>Link</b></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><b>Dropdown</b> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class ="active" ><a href="proiecte">Proiecte</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>


I tried to edit dropdown and dropdown-toggle but i didn't found those classes with focus(class:focus).

Answer

Please ovewrite this CSSin your custom CSS with !important

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
    background-color: gray!important;
    border-color: #337ab7!important;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #262626!important;
    background-color: #f5f5f5!important;
}