view raw
Mona Coder Mona Coder - 8 months ago 63
CSS Question

Twitter Bootstrap - How to Remove Blue Outline of Select Option

Can you please take a look at this example and let me know how I can get rid of that blue outline for drop-down select button and the Search inbox inside the drop down menu (shown at below image)?

enter image description here

I already tried :

.btn-default {
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
background-image: none !important;
input, textarea, select, a { outline: none !important; }
input:focus, textarea:focus, select:focus{ outline: none; }

but they are not doing the trick!


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;