Marco Marco - 1 year ago 152
CSS Question

Removing focus border outline on bootstrap select

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
, 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>

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download