Reputation: 249
I have installed bootstrap-select and it all works fine, except that blue borders appear in 2 instances:
1) in the dropdown menu
2) when a new value is picked
Can someone please help how it can be fixed? I adjusted a few things already.
.bootstrap-select .btn {
height: 43px;
color: rgba(0, 0, 0, 0.5);
background-color: white;
border-radius: 3px;
}
.bootstrap-select .btn:focus {
outline: none !important;
outline: 5px auto -webkit-focus-ring-color !important;
}
Upvotes: 2
Views: 4287
Reputation: 2673
Adding this to the very bottom of my HTML was what finally worked for me on Chrome:
<style type="text/css">
.bootstrap-select .dropdown-toggle:focus {
outline: none !important;
box-shadow: none !important;
}
:focus {
outline: none !important;
box-shadow: none !important;
}
</style>
I think the key was that I was loading Bootstrap and other libraries after setting the CSS.
Upvotes: 1
Reputation: 11648
apply those two css rules after all the other css styles
.bootstrap-select .dropdown-toggle:focus {
outline: none!important;
}
:focus {
outline: none!important;
}
Upvotes: 4
Reputation: 11
Add the css
.bootstrap-select.btn-group .dropdown-menu li a {
outline: none;
}
Upvotes: 1
Reputation: 1010
Removing the blue outline around the element and items inside of it:
<style>
.bootstrap-select .btn:focus {
outline: none !important;
}
.selectpicker a {
outline: 0;
}
</style>
Tested on Chrome, Firefox and Opera.
Upvotes: 2