title: Bootstrap-Select : remove ugly focus border
body: <p>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 :</p>
  <p><a href="https://i.stack.imgur.com/V2rNq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V2rNq.png" alt="enter image description here" /></a></p>
  <p>And when I don't have focus:</p>
  <p><a href="https://i.stack.imgur.com/ncoDM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ncoDM.png" alt="enter image description here" /></a></p>
  <p>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 <code>outline: none;</code> css, but it isn't working in my case.</p>
  <p>This is my CSS:</p>
  <pre><code>.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;
    */
  </code></pre>
  <p>And my input html:</p>
  <pre><code>&lt;select name=&quot;function_title_id&quot; 
  id=&quot;function_title_id&quot;  
  title=&quot;Please select...&quot;
  class=&quot;form-control selectpicker&quot; 
  data-live-search=&quot;true&quot;
  data-style=&quot;customSelect&quot;
  data-dropup-auto=&quot;false&quot;
  disabled&gt;
  &lt;/select&gt;
  </code></pre>
  <p>What am I missing ? Thanks!</p>
  <p><strong>UPDATE:</strong> Here's a fiddle link showing my problem :
  <a href="https://jsfiddle.net/jocxaqe9/" rel="nofollow noreferrer">https://jsfiddle.net/jocxaqe9/</a></p>