Marco Marco - 8 days ago 8
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
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

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

Comments