有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?
当前回答
试试这个,它和bootstrap的输入是一样的…
input:focus{
color: #212529;
background-color: #FFF;
border-color: #86B7FE;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
其他回答
在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变量来控制阴影宽度。
这将工作100%使用这个:
.form-control, .form-control:focus{
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
border: rgba(255, 255, 255, 0);
}
这应该有助于去除它! 输入[type = text] { 边界:没有; } 输入[type = text]:focus { 边界:没有; 不必:没有; }
如果你想让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;
}
简单的一个
要移除它:
.form-control, .btn {
box-shadow: none !important;
outline: none !important;
}
来改变它
.form-control, .btn {
box-shadow: new-value !important;
outline: new-value !important;
}