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

标签： htmlcssbootstrap-4bootstrap-selectpicker

Answer 1

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

1. 需要为选择输入定义以下属性：

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