如何在 Twitter Bootstrap 中删除选择选项的蓝色轮廓答案

【问题标题】：How to remove blue outline of select option in Twitter Bootstrap如何在 Twitter Bootstrap 中删除选择选项的蓝色轮廓
【发布时间】：2020-01-05 01:48:40
【问题描述】：

我正在处理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; }

但他们没有做到这一点。

【问题讨论】：

我相信这是 :focus

标签： css twitter-bootstrap-3

【解决方案1】：

引导表单输入元素不使用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;
}

【讨论】：

感谢 Blake，这对我们很有帮助，但是选择按钮呢？
抱歉，我在回答时错过了那部分。它在另一个答案中提到过，但为了完整起见，我已将该部分的选择器添加到我的答案中

【解决方案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;
}

【讨论】：

【解决方案3】：

我通过这样做删除了 bootstrap 4 下拉切换“点击时”蓝色边框：

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

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

【讨论】：

【解决方案4】：

添加cssfocus规则或者修改已有的。

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

同样，您可以添加select

【讨论】：

【解决方案5】：

您可以使用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;
}

【讨论】：

【解决方案6】：

无论是否引导，您都可以使用以下命令从select 标记中删除轮廓：

select:focus {
  box-shadow: none;
}

【讨论】：