Bootstrap-Select：删除丑陋的焦点边框

Question

我知道常规 html 控件已要求这样做，但我似乎无法摆脱围绕我的选择器列表框的丑陋黑色边框：

当我注意力不集中时：

我的输入周围已经有一个焦点半径蓝色，因此为了可访问性，我不需要这个黑色。我到处都读到我需要使用

outline: none;

css，但它在我的情况下不起作用。

这是我的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;
  */

我输入的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>

我错过了什么？谢谢！

更新：这是一个显示我的问题的小提琴链接： https://jsfiddle.net/jocxaqe9/

Answer 1

引导5：

添加类“

shadow-none

”以去除阴影。

Answer 2

我已经找到了解决方案。这有点“黑客”，但似乎有效：

1. 需要为select input定义以下属性：

   • data-style-base="form-control" -- 还必须 保留 form-control 类！
   • data-style="" -- 或任何其他要应用的自定义类

2. 添加以下 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;
}

小提琴：https://jsfiddle.net/sak06om8/

Answer 3

这适用于 2022 年的 Bootstrap 5 删除所有焦点阴影

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

只需确保它位于 bootstrap css 文件下方

Answer 4

尝试将其添加到您的 CSS 中。

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

看，其他答案没有考虑到的是，这个插件在带有 bootstrap-select 类的 div 中添加了它自己的

button

，并且仅使用 select 中的数据来构建它的下拉列表。因此，向您的 select 标签添加任何样式都是无用且没有效果的。

Answer 5

outline: none

和

box-shadow: none

足以完成您想要的操作，您的CSS是正确的，但您没有正确应用它，您需要将类

customSelect

添加到选择中，因此：

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

Answer 6

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

Answer 7

看到问题了吗？

customSelect

是你的

data-style

，你的班级是

selectpicker

。只需将

customSelect

更改为

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>

Answer 8

以上都对我不起作用，但这个有效。