Bootstrap-Select : remove ugly focus border

Question

I know this has been asked for regular html controls, but I cannot seem to get rid of this ugly black border that surrounds my selectpicker list box :

And when I don't have focus:

There's already a focus radius blue color that surrounds my input, so for accessibility, I do not need this black one. I've read everywhere that I need to use outline: none; css, but it isn't working in my case.

This is my CSS:

.customSelect{
  border: 1px solid #ced4da !important;
  color: #495057 !important;
}
.customSelect:hover{
  background-color: #f8f9fa !important;
}
.customSelect:focus{
  outline:none !important;

  /* also tried adding in :
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  */

And my input html:

<select name="function_title_id" 
id="function_title_id"  
title="Please select..."
class="form-control selectpicker" 
data-live-search="true"
data-style="customSelect"
data-dropup-auto="false"
disabled>
</select>

What am I missing ? Thanks!

UPDATE: Here's a fiddle link showing my problem : https://jsfiddle.net/jocxaqe9/

Answer 1

I've found a solution for this. It's a little "hack" but seems to work :

1. Need to define the following attributes to the select input:

   • data-style-base="form-control" -- must also keep the form-control class!
   • data-style="" -- or any other custom class to apply

2. Add the following CSS:

.bootstrap-select .form-control:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner > div.filter-option-inner-inner:focus {
    outline: 0px none #fff !important;
}

Fiddle: https://jsfiddle.net/sak06om8/

Answer 2

Add correct selector in CSS.

.selectpicker:focus {
  outline: none;
  border-color: red;
}

<select name="function_title_id" 
id="function_title_id"  
title="Please select..."
class="form-control selectpicker" 
data-live-search="true"
data-style="customSelect"
data-dropup-auto="false">
<option>1</option>
<option>2</option>
</select>

Answer 3

outline: none and box-shadow: none are sufficient to do what you want, your CSS is correct but you are not applying it right, you need to add the class customSelect to the select so:

<select name="function_title_id" 
    id="function_title_id"  
    title="Please select..."
    class="form-control selectpicker customSelect" 
    data-live-search="true"
    data-style="customSelect"
    data-dropup-auto="false"
    disabled>
</select>

Answer 4

see the problem? customSelect is your data-style, your class is selectpicker. Just change customSelect with selectpicker

.customSelect{
  border: 1px solid #ced4da !important;
  color: #495057 !important;
}
.customSelect:hover{
  background-color: #f8f9fa !important;
}
.customSelect:focus{
  outline:none !important;

  /* also tried adding in :
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  */

<select name="function_title_id" 
        id="function_title_id"  
        title="Please select..."
        class="form-control selectpicker" 
        data-live-search="true"
        data-style="customSelect"
        data-dropup-auto="false"
</select>

Answer 5

This works in 2022 for Bootstrap 5 Removes all focus shadows

*:focus {
    box-shadow: none !important;
}

just make sure this is below the bootstrap css file

Answer 6

Try adding this to your CSS.

.bootstrap-select button.dropdown-toggle:focus {
    outline: none !important;
}

See, the thing that the other answers didn't take into account is that this plugin adds it's own button inside a div with the class bootstrap-select and only uses the data inside select to build it's dropdown. Hence adding any style to your select tag would be useless and have no effect.

Answer 7

Bootstrap 5:

Add the class "shadow-none" to remove the shadow.