引导选择上的蓝色轮廓答案

【问题标题】：Blue outlines on bootstrap select引导选择上的蓝色轮廓
【发布时间】：2020-04-29 23:39:05
【问题描述】：

我已经安装了 bootstrap-select 并且一切正常，除了蓝色边框出现在 2 个实例中：

1) 在下拉菜单中

2) 选择新值时

有人可以帮忙解决一下吗？我已经调整了一些东西。

.bootstrap-select .btn {
  height: 43px;
  color: rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 3px;
}
.bootstrap-select .btn:focus {
  outline: none !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}

【问题讨论】：

标签： css twitter-bootstrap bootstrap-select

【解决方案1】：

在所有其他 css 样式之后应用这两个 css 规则

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

【讨论】：

【解决方案2】：

outline: 0;

如果你瞄准正确的项目，应该修复它。

【讨论】：

【解决方案3】：

添加css

.bootstrap-select.btn-group .dropdown-menu li a {
  outline: none;
}

【讨论】：

【解决方案4】：

尝试将其添加到您的 css 中：

:focus {
  outline: none;
}

【讨论】：

【解决方案5】：

移除元素周围的蓝色轮廓及其内部的项目：

<style>
    .bootstrap-select .btn:focus {
        outline: none !important;
    }

    .selectpicker a {
        outline: 0;
    }
</style>

在 Chrome、Firefox 和 Opera 上测试。

【讨论】：

【解决方案6】：

将它添加到我的 HTML 的最底部是最终在 Chrome 上对我有用的方法：

<style type="text/css">
    .bootstrap-select .dropdown-toggle:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    :focus {
      outline: none !important;
      box-shadow: none !important;
    }
</style>

我认为关键是我在设置 CSS 后加载了 Bootstrap 和其他库。

【讨论】：