改变引导输入焦点蓝色发光

有人知道如何改变Bootstrap的input:focus吗?当你点击input字段时显示的蓝色辉光?

447508 次浏览
小开
最佳答案

最后，我在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;
}
小开

如果你想让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;
}
小开

如果您正在使用Bootstrap 3。x，你现在可以用新的@input-border-focus变量改变颜色。

参见提交获取更多信息和警告。

在_variables.scss中更新@input-border-focus。

要修改此辉光的大小/其他部分，请修改mixin / _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);
}
}
小开

你可以使用.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之后加载它。它将适用于所有输入，包括文本区域，选择等…

小开

要禁用蓝色辉光(但你可以修改代码来改变颜色，大小等)，添加这个到你的css:

.search-form input[type="search"] {
-webkit-box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
}
下面是一个屏幕截图，展示了之前和之后的效果: enter image description here enter image description here

小开

我降落到这个线程寻找方法禁用辉光完全。许多答案对我来说太复杂了。为了简单的解决方案，我只需要一行CSS如下。

input, textarea, button {outline: none; }
小开

为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;
}

参见:重写引导CSS的最佳方法

小开

实际上，在Bootstrap 4.0.0-Beta(截至2017年10月)中，输入元素不是由输入(type =“文本”)引用的，输入元素的所有Bootstrap 4属性实际上都是基于形式的。

所以它使用的是.form-control:专注样式。用于突出显示输入元素的“on focus”的适当代码如下:

.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: none;
}

很容易实现，只需要改变边框颜色属性。

小开

对于Bootstrap v4.0.0 beta版本，你需要将以下内容添加到覆盖Bootstrap的样式表中(要么在CDN/local链接后添加到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上的border-color和rgba替换为你想要的颜色样式*。

小开
在Bootstrap 3.3.7中，你可以在定制器的Forms部分更改@input-border-focus值: enter image description here < / p >
小开

在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变量来控制阴影宽度。

小开

enter image description here enter image description here

你可以这样修改.form-control:focus 颜色而不改变引导样式:

快速修复

.form-control:focus {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

完整的解释

  1. 找到您正在使用的bootstrapCDN版本。例如，对我来说，现在是4.3.1:https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
  2. 搜索要修改的类。例如__ABC0，并复制你想修改的参数到你的css。在本例中是__ABC1和box-shadow。
  3. 为border-color选择一个颜色。在这种情况下，通过在步骤1中提到的bootstrap.css页面中搜索特定的类，我选择拾取引导程序用于.btn-success类的相同绿色。
  4. 将你选择的颜色转换为RGB，并将其添加到box-shadow参数中，而不改变bootstrap用于透明度的第四个RGBA参数(0.25)。
小开

为什么不直接使用呢?

 input:focus{
outline-color : #7a0ac5;
}
小开

我不能解决这个与CSS。似乎bootstrap是得到最后的发言权，即使我有网站。css后bootstrap。无论如何，这对我很有用。

$(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开发工具之前和之后的照片。注意对焦和不对焦边界颜色的区别。另一方面，这对按钮不起作用。与按钮。与按钮，你必须改变轮廓属性为none。

enter image description here

enter image description here

小开

对于焦点前的输入边框。你可以指定你想要使用的最喜欢的颜色和其他css，如填充等


.input {
padding: 6px 190px 6px 15px;
outline: #2a65ea auto 105px ;
}

当我们关注输入时。你可以指定你喜欢的颜色轮廓


.input:focus{
box-shadow: none;
border-color: none;
outline: lightgreen auto 5px ;
}
小开

如果你想完全移除阴影，可以在input元素中添加类shadow-none。

小开

在上面的@wasinger的回复基础上，在引导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;
小开

这将工作100%使用这个:

.form-control, .form-control:focus{
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
border: rgba(255, 255, 255, 0);
}
小开

简单的一个

要移除它:

.form-control, .btn {
box-shadow: none !important;
outline: none !important;
}

来改变它

.form-control, .btn {
box-shadow: new-value !important;
outline: new-value !important;
}
小开

这应该有助于去除它! 

input[type = text] {
border: none;
}


input[type = text]:focus {
border: none;
box-shadow: none;
}

小开

试试这个，它和bootstrap的输入是一样的…

input:focus{
color: #212529;
background-color: #FFF;
border-color: #86B7FE;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

提交答案