更改引导input焦点蓝色发光
有谁知道如何改变引导input焦点蓝光。 即当你点击一个input字段时显示的辉光？
最后，我在bootstrap.css中更改了以下css条目
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); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6); outline: 0 none; } 在Bootstrap 3中，您可以使用.form-controlselect器来匹配所有input。 例如改变为红色：
.form-control:focus { border-color: #FF0000; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6); }
把它放在你的自定义的css文件中并在bootstrap.css之后加载它。 它将适用于所有input，包括textarea，select等…
如果您正在使用Bootstrap 3.x，则可以使用新的@input-border-focusvariables更改颜色。
请参阅提交更多信息和警告。
在_variables.scss更新@input-border-focus 。
要修改此发光的大小/其他部分，请修改mixins / _forms.scss
@mixin form-control-focus($color: $input-border-focus) { $color-rgba: rgba(red($color), green($color), blue($color), .6); &:focus { border-color: $color; outline: 0; @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba); } }
如果您希望Chrome浏览器显示平台默认的“黄色”大纲，请进行以下更改。
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: none; box-shadow: none; -webkit-box-shadow: none; outline: -webkit-focus-ring-color auto 5px; }
要禁用蓝色发光（但您可以修改代码来更改颜色，大小等），将其添加到您的CSS：
.search-form input[type="search"] { -webkit-box-shadow: none; outline: -webkit-focus-ring-color auto 0px; }
为身份标记添加一个ID。 在你自己的Css（而不是bootstrap.css）中指向新的主体ID，并设置你想覆盖的类或标签和新的属性。 现在，您可以随时更新bootstrap，而不会丢失您的更改。
html文件：
<body id="bootstrap-overrides">
css文件：
#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{ border-color: red; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6); outline: 0 none; }
另请参阅： 覆盖引导CSS的最佳方法
我登陆到这个线程寻找的方式来完全禁用发光。 许多答案过于复杂，我的目的。 为了方便解决，我只需要一行CSS如下。
input, textarea, button {outline: none; }
实际上，在Bootstrap 4.0.0-Beta（截至2017年10月），input元素没有被input [type =“text”]引用，input元素的所有Bootstrap 4属性实际上都是基于表单的。
所以它使用.form-control：focus样式。 input元素的“on focus”突出显示的适当代码如下所示：
.form-control:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: none; }
很容易实现，只需更改边框颜色属性。
