Bootstrap-Select : 移除丑陋的焦点边框

Posted 2023-05-08

【中文标题】Bootstrap-Select : 移除丑陋的焦点边框

【英文标题】：Bootstrap-Select : remove ugly focus border

【发布时间】：2021-07-10 21:17:21

【问题描述】：

我知道这已被要求用于常规 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/

【问题讨论】：

您的类与您的 css 选择器不匹配：.selectpicker.

重复***.com/questions/26999996/…

这能回答你的问题吗？ remove bootstrap select focus outline in chrome

你上课是错的

还是不行。我尝试使用 .selectpicker css 选择器，但它并没有改变任何东西。我已经用小提琴链接更新了我的问题，以演示我的问题。附：红色只是用于测试.. 感谢您的帮助！

【参考方案1】：

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

需要为选择输入定义如下属性：

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

添加以下 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/

【参考方案2】：

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

【讨论】：

刚刚添加了一个更新，其中包含一个显示我的问题的小提琴。我试过使用 .selectpicker 选择器，但还是不行。

【参考方案3】：

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>

【参考方案4】：

看到问题了吗？ 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>

【讨论】：

还是不行。首先，我认为数据样式应用于生成的按钮...无论如何，我尝试使用 .selectpicker:focus.. 将轮廓、框阴影等添加到无或 0，但没有任何效果。我仍然得到那个黑色焦点......通过引导来强制这个轮廓的其他东西？？

【参考方案5】：

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

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

看，其他答案没有考虑到的是，这个插件在 div 中添加了它自己的 button 类 bootstrap-select 并且只有使用 select 中的数据来构建它的下拉菜单。因此，将任何样式添加到您的 select 标记都是无用的，也没有任何效果。

【参考方案6】：

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

*:focus 
    box-shadow: none !important;

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