How to remove blue outline of select option in Twitter Bootstrap
Bootstrap form input elements do not use the outline
property, but rather recreate it using box-shadow
. You were on the right track with what you were doing, but the style that causes this is the following:
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
You will want to override those styles with your own, setting the box-shadow
to none
and adjusting the border-color
to match your default.
As for the select box, you can use the following style, as was originally mentioned by @kamlesh-kushwaha, to override the bootstrap setting:
.bootstrap-select .btn:focus {
outline: none !important;
}
For <select>
dropdown, change in bootstrap-select.min line 29:
.bootstrap-select .dropdown-toggle:focus {
outline: thin dotted #333 !important;
outline: 5px auto -webkit-focus-ring-color !important;
outline-offset: -2px;}
to:
.bootstrap-select .dropdown-toggle:focus {
outline: none!important;
}
I remove bootstrap 4 dropdown-toggle 'on click' blue borders by doing this:
.yourdivname:focus {
box-shadow: none;
}
Anything else seemed to be irrelevant. For instance, with normal buttons {outline: none} always seemed to work, but not for this element. All that was needed was the box-shadow:none property.