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

Question

请你看一下this example，让我知道如何摆脱下拉选择按钮的蓝色轮廓和下拉菜单中的搜索收件箱（如下图所示）？

我已经尝试过：

.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

添加css focus规则或修改现有规则。

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

同样，您可以添加select

Answer 3

您可以使用input[type] {}

所有引导输入类型如下

textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus {   
    border-color: rgba(126, 239, 104, 0.8);
    /* give your style */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(255, 0, 0, 0.6);
    /* give your style */
    outline: 0 none;
    /* give your style */
}

select:focus {
   outline-color: transparent;
}

Answer 4

对于<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;
}

Answer 5

我通过执行以下操作删除“点击”蓝色边框上的“bootstrap 4 dropdown-toggle”：

.yourdivname:focus {
  box-shadow: none;
}

其他任何事情似乎都无关紧要。例如，使用普通按钮{outline：none}似乎总是有效，但不适用于此元素。所需要的只是box-shadow：none属性。

Answer 6

是否有引导程序，可以使用以下命令从select标记中删除轮廓：

select:focus {
  box-shadow: none;
}