Twitter Bootstrap - 如何删除选择选项的蓝色轮廓

Question

您能否看一下这个例子,让我知道如何摆脱下拉选择按钮的蓝色轮廓和下拉菜单中的搜索收件箱(如下图所示)？

我已经尝试过:

.btn-default {
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
}
input, textarea, select, a { outline: none !important; }
input:focus, textarea:focus, select:focus{ outline: none; } 

但他们没有做到这一点!

Answer 1

Bootstrap表单输入元素不使用该outline属性,而是使用它重新创建它box-shadow.你跟你正在做的事情走在正确的轨道上,但导致这种情况的风格如下:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

您将希望使用自己的样式覆盖这些样式,设置box-shadow为none并调整border-color以匹配您的默认值.

对于选择框,您可以使用@ kamlesh-kushwaha最初提到的以下样式来覆盖引导程序设置:

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

Answer 2

对于<select>下拉菜单，更改bootstrap-select.min第 29 行：

.bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #333 !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;}

到：

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