2

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 :

enter image description here

And when I don't have focus:

enter image description here

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/

5
  • 1
    Your class does not match your css selector: .selectpicker. Commented Apr 15, 2021 at 19:53
  • duplicate stackoverflow.com/questions/26999996/…
    – biberman
    Commented Apr 15, 2021 at 19:54
  • Does this answer your question? remove bootstrap select focus outline in chrome
    – biberman
    Commented Apr 15, 2021 at 19:54
  • you are just wrong to get class
    – frankfurt
    Commented Apr 17, 2021 at 8:01
  • Still no go. I tried using the .selectpicker css selector, but it doesn't change anything. I've update my question with a fiddle link to demo my problem. P.s. the red color was just for testing.. Thanks for your help!
    – Pat
    Commented Apr 17, 2021 at 18:28

7 Answers 7

7

Bootstrap 5:

Add the class "shadow-none" to remove the shadow.

4

I've found a solution for this. It's a little "hack" but seems to work :

  1. Need to define the following attributes to the select input:

    • data-style-base="form-control" -- must also keep the form-control class!
    • data-style="" -- or any other custom class to apply
  2. Add the following CSS:

.bootstrap-select .form-control:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner:focus {
    outline: 0px none #fff !important;
}

.bootstrap-select .form-control > div.filter-option > div.filter-option-inner > div.filter-option-inner-inner:focus {
    outline: 0px none #fff !important;
}

Fiddle: https://jsfiddle.net/sak06om8/

4

This works in 2022 for Bootstrap 5 Removes all focus shadows

*:focus {
    box-shadow: none !important;
}

just make sure this is below the bootstrap css file

1
  • you can also give class name and :focus if want to remove only one choosen one, not globally. Commented Jan 26, 2023 at 14:02
2

Try adding this to your CSS.

.bootstrap-select button.dropdown-toggle:focus {
    outline: none !important;
}

See, the thing that the other answers didn't take into account is that this plugin adds it's own button inside a div with the class bootstrap-select and only uses the data inside select to build it's dropdown. Hence adding any style to your select tag would be useless and have no effect.

1

outline: none and box-shadow: none are sufficient to do what you want, your CSS is correct but you are not applying it right, you need to add the class customSelect to the select so:

<select name="function_title_id" 
    id="function_title_id"  
    title="Please select..."
    class="form-control selectpicker customSelect" 
    data-live-search="true"
    data-style="customSelect"
    data-dropup-auto="false"
    disabled>
</select>
0

Add correct selector in CSS.

.selectpicker:focus {
  outline: none;
  border-color: red;
}
<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">
<option>1</option>
<option>2</option>
</select>

1
  • Just added an update with a fiddle showing my issue. I've tried using the .selectpicker selector, but it still doesn't work.
    – Pat
    Commented Apr 17, 2021 at 18:23
0

see the problem? customSelect is your data-style, your class is selectpicker. Just change customSelect with selectpicker

.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;
  */
<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"
</select>
1
  • Still no go. First, I thought data-style was applied on the button that is generated... Regardless, I tried using .selectpicker:focus{..} Added outline, box-shadow, etc to none or 0, nothing does it. I still get that black focus ... Somehting else by bootstrap that forces that outline ??
    – Pat
    Commented Apr 17, 2021 at 12:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.