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/
.selectpicker
.