tektiv tektiv - 1 year ago 85
CSS Question

Remove blinking effet bootstrap dropdown

While modifying Bootstrap vanilla's css, I found a weird blinking effect when you click on a dropdown then click outside of it (in the body for example).

.dropdown > a:focus,
.open {
background-color: #444;
color: #FFF;

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
<li><a href="#">Another action</a>
<li><a href="#">Something else here</a>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a>

I made a JSFiddle to make things clearer, and less difficult to explain.

Do you have any idea about which css selector should I use to fix it ? Thanks in advance !

Answer Source

You need to style your dropdown link instead of the dropdown itself by adding this in your css :

.navbar-default .navbar-nav > .dropdown > a {

Including more tags and classes will hold a higher priority over a style on the same element without the extra classes.
For instance : just adding body before a class can make the class more specific.

I've updatded your JSFiddle as well.