1

我已经安装了 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;
}
4

6 回答 6

4

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

.bootstrap-select .dropdown-toggle:focus {
    outline: none!important;
}
:focus {
  outline: none!important;
}
于 2016-12-02T17:27:55.710 回答
1
outline: 0;

如果您针对正确的项目,应该修复它。

于 2014-08-17T18:35:15.113 回答
1

添加CSS

.bootstrap-select.btn-group .dropdown-menu li a {
  outline: none;
}
于 2016-01-10T20:36:01.003 回答
0

尝试将此添加到您的CSS:

:focus {
  outline: none;
}
于 2014-08-17T17:27:42.547 回答
0

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

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

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

在 Chrome、Firefox 和 Opera 上测试。

于 2015-01-21T06:46:49.460 回答
0

将它添加到我的 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 和其他库。

于 2020-04-29T15:39:05.740 回答