有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
我降落到这个线程寻找方法禁用辉光完全。许多答案对我来说太复杂了。为了简单的解决方案,我只需要一行CSS如下。
input, textarea, button {outline: none; }
其他回答
你可以使用.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之后加载它。它将适用于所有输入,包括文本区域,选择等…
最后,我在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 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变量来控制阴影宽度。
试试这个,它和bootstrap的输入是一样的…
input:focus{
color: #212529;
background-color: #FFF;
border-color: #86B7FE;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
如果你想完全移除阴影,添加类shadow-none到你的输入元素中。