Removing focus border outline on bootstrap select

Question

I am using this plugin in my project, and trying to remove the blue border on focuse on the select. I have tried by setting the outline to none, like this:

*:focus {
  outline: 0!important;
}

I have also tried with outline:none , but it is not working, how can I remove the outline from it?

I am using the same html as suggested in the plugin docs:

<select name="position" value="{{ $player->position or  old('position') }}" class="selectpicker show-menu-arrow form-control" multiple data-max-options="3" data-icon-base="ion" data-tick-icon="ion-checkmark-round" title="Choose positions (max 3)" required>
     @foreach($positions as $key => $value)
        <option data-subtext="{{ $key }}">{{ $value }}</option>
     @endforeach
</select>

Answer 1

I fixed it with this:

.bootstrap-select .btn:focus {
    outline: none !important;
}

and you should add it at the end of your css code after the bootstrap-select.css