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

Bootstrap 5:

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

Answer 2

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