Bootstrap-Select : remove ugly focus border

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/

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/