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|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|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|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|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|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|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|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|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|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|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|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|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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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