有谁知道如何更改 Bootstrap 的input:focus？当您单击 input 字段时出现蓝色光晕？
【问题讨论】：
标签： html css twitter-bootstrap
最后我在 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;
}
【讨论】：
input[type] {}
@input-border-focus 而不是这个答案。
select
您可以使用.form-control 选择器来匹配所有输入。比如变成红色：
.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 之后加载。它将适用于所有输入，包括 textarea、select 等...
【讨论】：
如果您使用的是 Bootstrap 3.x，您现在可以使用新的 @input-border-focus 变量更改颜色。
请参阅the commit 了解更多信息和警告。
在_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);
}
}
【讨论】：
.btn:focus { outline: none; } 覆盖。
_variables.scss。
您可以通过这种方式修改.form-control:focus 颜色而不改变引导样式：
.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
.form-control:focus 并将您要修改的参数复制到您的 css 中。在这种情况下是border-color 和box-shadow。
border-color 选择一种颜色。 在这种情况下，我选择通过在步骤 1 中提到的 bootstrap.css 页面中搜索特定类来选择引导程序用于其.btn-success 类的相同绿色。
box-shadow 参数，而无需更改引导程序用于透明度的第四个 RGBA 参数 (0.25)。【讨论】：
.form-control:focus, select:focus { box-shadow: 0 4px 2px -2px grey; }
对于 Bootstrap v4.0.0 beta 版本，您需要将以下内容添加到覆盖 Bootstrap 的样式表中（在 CDN/本地链接之后添加到 bootstrap v4.0.0 beta 或添加 !important 到样式：
.form-control:focus {
border-color: #6265e4 !important;
box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
将 box-shadow 上的边框颜色和 rgba 替换为您喜欢的任何颜色样式*。
【讨论】：
在Bootstrap 4中，如果你自己编译SASS，你可以改变以下变量来控制焦点阴影的样式：
$input-btn-focus-width: .2rem !default;
$input-btn-focus-color: rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
注意：从 Bootstrap 4.1 开始，$input-btn-focus-color 和 $input-btn-focus-box-shadow 变量仅用于输入元素，而不用于按钮。按钮的焦点阴影硬编码为box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);，因此您只能通过$input-btn-focus-width 变量控制阴影宽度。
【讨论】：
如果您希望 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;
}
【讨论】：
outline: dotted thin black;（或您的测试建议的任何东西）
要禁用蓝色发光（但您可以修改代码以更改颜色、大小等），请将其添加到您的 css：
.search-form input[type="search"] {
-webkit-box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
}
这是显示效果的屏幕截图：之前和之后：
【讨论】：
我登陆这个线程寻找完全禁用发光的方法。出于我的目的，许多答案过于复杂。为了简单的解决方案，我只需要一行 CSS 如下。
input, textarea, button {outline: none; }
【讨论】：
box-shadow: none;。
box-shadow 之后添加!important
在 body 标签中添加一个 ID。在你自己的 Css（不是 bootstrap.css）中指向新的 body ID 并设置你想要覆盖的类或标签和新的属性。 现在您可以随时更新引导程序而不会丢失您的更改。
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;
}
【讨论】：
实际上，在 Bootstrap 4.0.0-Beta（截至 2017 年 10 月）中，输入元素没有被 input[type="text"] 引用，输入元素的所有 Bootstrap 4 属性实际上是基于形式的。
所以它使用 .form-control:focus 样式。输入元素的“焦点”突出显示的适当代码如下：
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: none;
}
很容易实现，只需更改 border-color 属性即可。
【讨论】：
box-shadow: xpx ypx #80bdff;
简单的一个
删除它：
.form-control, .btn {
box-shadow: none !important;
outline: none !important;
}
改变它
.form-control, .btn {
box-shadow: new-value !important;
outline: new-value !important;
}
【讨论】：
如果您想完全移除阴影，请将 shadow-none 类添加到您的输入元素中。
【讨论】：
以上面的@wasinger's reply 为基础，在Bootstrap 4.5中，我不仅要覆盖颜色变量，还要覆盖box-shadow 本身。
$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;
【讨论】：
用于焦点前的输入边框。您可以指定要使用的最喜欢的颜色和其他 css，如填充等
.input {
padding: 6px 190px 6px 15px;
outline: #2a65ea auto 105px ;
}
当我们专注于输入时。您可以指定自己喜欢的颜色轮廓
.input:focus{
box-shadow: none;
border-color: none;
outline: lightgreen auto 5px ;
}
【讨论】：
为什么不直接使用？
input:focus{
outline-color : #7a0ac5;
}
【讨论】：
我无法用 CSS 解决这个问题。似乎 Boostrap 获得了最后的发言权，即使我在引导后通过 site.css 获得了发言权。无论如何，这对我有用。
$(document).ready(function () {
var elements = document.getElementsByClassName("form-control");
Array.from(elements).forEach(function () {
this.addEventListener("click", cbChange, false);
})
});
function cbChange(event) {
var ele = event.target;
var obj = document.getElementById(ele.id);
obj.style.borderColor = "lightgrey";
}
后来我发现这可以在 css 中使用。显然只有表单控件
.form-control.focus, .form-control:focus {
border-color: gainsboro;
}
以下是来自 Chrome 开发者工具的前后截图。注意焦点打开和焦点关闭之间边框颜色的差异。附带说明，这不适用于按钮。带按钮。使用按钮，您必须将大纲属性更改为无。
【讨论】：
这将 100% 使用：
.form-control, .form-control:focus{
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
border: rgba(255, 255, 255, 0);
}
【讨论】：
这应该有助于删除它！
input[type = text] {
border: none;
}
input[type = text]:focus {
border: none;
box-shadow: none;
}【讨论】：