CODEWITHSUNDEEP
csstwitter-bootstrap-3
Mona Coder
Mona Coder

Reputation: 6316

How to remove blue outline of select option in Twitter Bootstrap

I am working on this example and am seeking how to get rid of that blue outline for drop-down select button and the Search inbox inside the drop down menu. See this 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.

Upvotes: 17

Views: 47521

Answers (6)

Emmanuel Osimosu
Emmanuel Osimosu

Reputation: 6004

Bootstrap or not, you can remove the the outline from a select tag with with:

select:focus {
  box-shadow: none;
}

Upvotes: 1

Gmoney Mozart
Gmoney Mozart

Reputation: 97

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.

Upvotes: 4

Sebastian
Sebastian

Reputation: 517

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;
}

Upvotes: 5

Blake Mann
Blake Mann

Reputation: 5490

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;
}

Upvotes: 29

4dgaurav
4dgaurav

Reputation: 11496

You can use input[type] {}

All bootstrap input type as below

textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus {   
    border-color: rgba(126, 239, 104, 0.8);
    /* give your style */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6);
    /* give your style */
    outline: 0 none;
    /* give your style */
}

select:focus {
   outline-color: transparent;
}

Upvotes: 3

K K
K K

Reputation: 18099

Add the css focus rule or modify the existing one.

.bootstrap-select .btn:focus{outline:none!important;}

Similarly, you can add for select

Upvotes: 3

Related Questions