blocks|key|161737|text|最后，我在bootstrap.css中更改了以下css条目|type|unstyled|depth|inlineStyleRanges|entityRanges|data|161738|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;
}|code-block|syntax|javascript|161739|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In the end I changed the following css entry in bootstrap.css

<pre><code>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;
}
</code></pre>

blocks|key|161789|text|您可以使用.form-control选择器来匹配所有输入。例如，要更改为红色：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|161790|.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);
}|code-block|syntax|javascript|161791|将其放入您的自定义css文件中，并在bootstrap.css之后加载。它将适用于所有输入，包括文本区域，选择等。|161792|entityMap^0|5|D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You can use the <code>.form-control</code> selector to match all inputs. For example to change to red:

<pre><code>.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);
}
</code></pre>

Put it in your custom css file and load it after bootstrap.css. It will apply to all inputs including textarea, select etc...

blocks|key|379840|text|对于Bootstrap+v4.0.0测试版，您需要将以下内容添加到覆盖Bootstrap的样式表中(在指向bootstrap+v4.0.0测试版的CDN/本地链接之后添加，或者将!important添加到样式中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|379841|.form-control:focus+{
++border-color:+#6265e4+!important;
++box-shadow:+0+0+5px+rgba(98,+101,+228,+1)+!important;
}|code-block|syntax|javascript|379842|替换框阴影上的边框颜色和rgba，使用您喜欢的颜色样式*。|379843|entityMap^0|2H|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

For Bootstrap v4.0.0 beta release you will need the following added to a stylesheet that overrides Bootstrap (either add in after CDN/local link to bootstrap v4.0.0 beta or add <code>!important</code> to the stylings:

<pre><code>.form-control:focus {
 border-color: #6265e4 !important;
 box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
</code></pre>

Replace the border-color and the rgba on the box-shadow with which ever colour style you'd like*.

blocks|key|379926|text|在Bootstrap+4中，如果您自己编译SASS，则可以更改以下变量以控制焦点阴影的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|379927|$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;|code-block|syntax|javascript|379928|注意:从Bootstrap4.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变量控制阴影宽度。|offset|length|style|CODE|379929|entityMap^0|0|0|J|M|16|R|2Q|1H|4F|M|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|N|$]]

In Bootstrap 4, if you compile SASS by yourself, you can change the following variables to control the styling of the focus shadow:

<pre><code>$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;
</code></pre>

Note: as of Bootstrap 4.1, the <code>$input-btn-focus-color</code> and <code>$input-btn-focus-box-shadow</code> variables are used only for input elements, but not for buttons. The focus shadow for buttons is hardcoded as <code>box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);</code>, so you can only control the shadow width via the <code>$input-btn-focus-width</code> variable.

blocks|key|161766|text|如果你想让Chrome显示平台默认的“黄色”轮廓，这里有一些改变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|161767|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;
}|code-block|syntax|javascript|161768|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here are the changes if you want Chrome to show the platform default "yellow" outline.

<pre><code>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;
}
</code></pre>

blocks|key|161855|text|要禁用蓝色发光(但您可以修改代码以更改颜色、大小等)，请将以下内容添加到css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|161856|.search-form+input[type="search"]+{++
++++-webkit-box-shadow:+none;
++++outline:+-webkit-focus-ring-color+auto+0px;
}+|code-block|syntax|javascript|161857|这是一个截图，展示了效果:之前和之后：|161858|📷|atomic|offset|length|161859|161860|​|161861|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/848e5230c574ce0a859cd1ea225729ac.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/60220719c708997854a6b64d373af087.png^0|0|0|0|0|1|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|14|8|@]|9|@$L|15|M|16|1|17]]|A|$]]|$1|N|3|J|5|K|7|18|8|@]|9|@$L|19|M|1A|1|1B]]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]|Z|$5|T|U|V|A|$W|10|Y|-4]]]]

To disable the blue glow (but you can modify the code to change color, size, etc), add this to your css:

<pre><code>.search-form input[type="search"] { 
 -webkit-box-shadow: none;
 outline: -webkit-focus-ring-color auto 0px;
} 
</code></pre>

Here's a screencapture showing the effect: before and after:
<img src="https://i.stack.imgur.com/oMHOr.png" alt="enter image description here">
<img src="https://i.stack.imgur.com/WcK7H.png" alt="enter image description here">

blocks|key|379798|text|我来到这个帖子上，寻找完全禁用glow的方法。对于我的目的来说，许多答案过于复杂。为了简单起见，我只需要一行CSS代码，如下所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|379799|input,+textarea,+button+{outline:+none;+}|code-block|syntax|javascript|379800|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I landed to this thread looking for the way to disable glow altogether. Many answers were overcomplicated for my purpose. For easy solution, I just needed one line of CSS as follows.

<pre><code>input, textarea, button {outline: none; }
</code></pre>

blocks|key|380076|text|简单的一个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|380077|要删除它，请执行以下操作：|380078|.form-control,+.btn+{
++++box-shadow:+none+!important;
++++outline:+none+!important;
}|code-block|syntax|javascript|380079|去改变它|380080|.form-control,+.btn+{
++++box-shadow:+new-value+!important;
++++outline:+new-value+!important;
}|380081|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Simple one
To remove it:
<pre><code>.form-control, .btn {
 box-shadow: none !important;
 outline: none !important;
}
</code></pre>
To change it
<pre><code>.form-control, .btn {
 box-shadow: new-value !important;
 outline: new-value !important;
}
</code></pre>

blocks|key|380040|text|如果希望完全移除阴影，请将类shadow-none添加到输入元素中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|380041|entityMap^0|E|B|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

If you want to remove the shadow completely add the class <code>shadow-none</code> to your input element.

blocks|key|162003|text|在Bootstrap+3.3.7中，您可以在定制器的Forms部分更改@input-border-focus值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162004|📷|atomic|offset|length|162005|​|162006|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/6284fb2969be263f53522b02872d351e.jpeg|imageAlt^0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@$E|T|F|U|1|V]]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P|Q|-4]]]]

In Bootstrap 3.3.7 you can change the @input-border-focus value in the Forms section of the customizer:
<a href="https://i.stack.imgur.com/IyBKR.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IyBKR.jpg" alt="enter image description here"></a>

blocks|key|162133|text|用于焦点之前的输入边框。您可以指定您最喜欢的颜色和其他css，如填充等|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162134|.input+{
++++padding:+6px+190px+6px+15px;
++++outline:+#2a65ea+auto+105px+;
}|code-block|syntax|javascript|162135|当我们专注于输入的时候。您可以指定您最喜欢的颜色轮廓|162136|.input:focus{
++++box-shadow:+none;
++++border-color:+none;
++++outline:+lightgreen+auto+5px+;
}|162137|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

For the input border before the focus. You can specify your favorite color you want to use and other css like padding etc

<pre><code>
.input {
 padding: 6px 190px 6px 15px;
 outline: #2a65ea auto 105px ;
}
</code></pre>

When we focus on input. You can specify your favorite color outline you wish

<pre><code>
.input:focus{
 box-shadow: none;
 border-color: none;
 outline: lightgreen auto 5px ;
}
</code></pre>

blocks|key|162051|text|为什么不直接使用呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162052|+input:focus{
++++++++outline-color+:+#7a0ac5;
++++}|code-block|syntax|javascript|162053|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why not just use ?

<pre><code> input:focus{
 outline-color : #7a0ac5;
 }
</code></pre>

blocks|key|379995|text|我不能用CSS解决这个问题。似乎Boostrap拥有最后的话语权，尽管我在bootstrap之后使用了site.css。在任何情况下，这对我都很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|379996|$(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";
}|code-block|syntax|javascript|379997|后来，我发现这在css中是有效的。显然只有表单控件|379998|.form-control.focus,+.form-control:focus+{
++++border-color:+gainsboro;
}+|379999|这是Chrome开发者工具的前后截图。请注意focus+on和focus+off之间边框颜色的差异。顺便说一句，这对按钮不起作用。带按钮的。对于按钮，您必须将outline属性更改为none。|380000|​|380001|📷|atomic|offset|length|380002|380003|380004|380005|380006|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/89c14b790d8f594c39e336fde51256e2.jpeg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/90d16ddcb653d937a73697f0d420de4c.jpeg^0|0|0|0|0|0|0|0|1|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1E|8|@]|9|@$R|1F|S|1G|1|1H]]|A|$]]|$1|T|3|N|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|N|5|6|7|1J|8|@]|9|@]|A|$]]|$1|V|3|P|5|Q|7|1K|8|@]|9|@$R|1L|S|1M|1|1N]]|A|$]]|$1|W|3|N|5|6|7|1O|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14|15|-4]]|16|$5|10|11|12|A|$13|17|15|-4]]]]

I could not resolve this with CSS. It seems like Boostrap is getting the last say even though I have by site.css after bootstrap. In any event, this worked for me. 

<pre><code>$(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";
}
</code></pre>

Later I found this to work in the css. Obviously with form-controls only

<pre><code>.form-control.focus, .form-control:focus {
 border-color: gainsboro;
} 
</code></pre>

Here are before and after shots from Chrome Developer tool. Notice the difference in border color between focus on and focus off. On a side note, this does not work for buttons. With buttons. With buttons you have to change outline property to none. 

<a href="https://i.stack.imgur.com/aQ64i.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aQ64i.jpg" alt="enter image description here"></a>

<a href="https://i.stack.imgur.com/bnijw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bnijw.jpg" alt="enter image description here"></a>

blocks|key|162178|text|使用下面的代码，这将100%25有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|162179|.form-control,+.form-control:focus{
+++box-shadow:+0+0+0+0+rgba(255,+255,+255,+0);
+++border:+rgba(255,+255,+255,+0);
}|code-block|syntax|javascript|162180|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This will work 100% use this:
<pre class="lang-css prettyprint-override"><code>.form-control, .form-control:focus{
 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
 border: rgba(255, 255, 255, 0);
}
</code></pre>

blocks|key|380111|text|这应该有助于删除它！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|380112|input[type+=+text]+{
++border:+none;
}

input[type+=+text]:focus+{
++border:+none;
++box-shadow:+none;
+}|code-block|syntax|javascript|380113|​|380114|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This should help remove it!
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type = text] {
 border: none;
}

input[type = text]:focus {
 border: none;
 box-shadow: none;
 }</code></pre>
</div>
</div>

Does anyone know the how to change Bootstrap's <code>input:focus</code>? The blue glow that shows up when you click on an <code>input</code> field?

Change Bootstrap input focus blue glow

谁知道如何更改Bootstrap的input:focus？当您单击input字段时，会出现蓝光吗？

问更改Bootstrap输入焦点蓝色发光
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改Bootstrap输入焦点蓝色发光EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问更改Bootstrap输入焦点蓝色发光
EN