CSS 如何在 Twitter Bootstrap 中删除选择选项的蓝色轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24338676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove blue outline of select option in Twitter Bootstrap
提问by Mona Coder
I am working on this exampleand am seeking how to get rid of that blue outline for drop-down select button and the Search inbox inside the drop down menu. See this image:
我正在研究这个例子，正在寻找如何摆脱下拉选择按钮和下拉菜单中的搜索收件箱的蓝色轮廓。看这张图片：
I already tried:
我已经尝试过：
.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; }
but they are not doing the trick.
但他们并没有做到这一点。
回答by Blake Mann
Bootstrap form input elements do not use the outlineproperty, but rather recreate it using box-shadow. You were on the right track with what you were doing, but the style that causes this is the following:
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);
}
You will want to override those styles with your own, setting the box-shadowto noneand adjusting the border-colorto match your default.
您将希望用自己的样式覆盖这些样式，将 设置box-shadow为none并调整border-color以匹配您的默认值。
As for the select box, you can use the following style, as was originally mentioned by @kamlesh-kushwaha, to override the bootstrap setting:
至于选择框，您可以使用@kamlesh-kushwaha 最初提到的以下样式来覆盖引导程序设置：
.bootstrap-select .btn:focus {
outline: none !important;
}
回答by K K
Add the css focusrule or modify the existing one.
添加 cssfocus规则或修改现有规则。
.bootstrap-select .btn:focus{outline:none!important;}
Similarly, you can add for select
同样，您可以添加 select
回答by Sebastian
For <select>dropdown, change in bootstrap-select.minline 29:
对于<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;}
to:
到：
.bootstrap-select .dropdown-toggle:focus {
outline: none!important;
}
回答by 4dgaurav
You can use input[type] {}
您可以使用 input[type] {}
All bootstrap input type as below
所有引导输入类型如下
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;
}
回答by Gmoney Mozart
I remove bootstrap 4 dropdown-toggle 'on click' blue borders by doing this:
我通过执行以下操作删除 bootstrap 4 下拉切换“点击时”蓝色边框：
.yourdivname:focus {
box-shadow: none;
}
Anything else seemed to be irrelevant. For instance, with normal buttons {outline: none} always seemed to work, but not for this element. All that was needed was the box-shadow:none property.
其他任何事情似乎都无关紧要。例如，使用普通按钮 {outline: none} 似乎总是有效，但不适用于此元素。所需要的只是 box-shadow:none 属性。
回答by Emmanuel Osimosu
Bootstrap or not, you can remove the the outline from a selecttag with with:
无论是否引导，您都可以使用以下命令从select标签中删除轮廓：
select:focus {
box-shadow: none;
}
