blocks|key|1235596|text|你可以在焦点上将outline:+none;和边框设置为不同的颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1235597|entityMap^0|8|E|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|$]]

you could just set <code>outline: none;</code> and border to a different color on focus.

blocks|key|1235651|text|要删除默认焦点，请在默认.css文件中使用以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1235652|:focus+{outline:none;}|code-block|syntax|javascript|1235653|然后，可以按元素单独控制焦点边框颜色，也可以在默认.css中控制焦点边框颜色：|1235654|:focus+{outline:none;border:1px+solid+red}|1235655|显然用你选择的十六进制代码替换red。|offset|length|style|CODE|1235656|您还可以保持边框不变，并控制背景颜色(或图像)以突出显示该字段：|1235657|:focus+{outline:none;background-color:red}|1235658|:-)|1235659|entityMap^0|0|0|0|0|F|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

To remove the default focus, use the following in your default .css file :

<pre><code>:focus {outline:none;}
</code></pre>

You can then control the focus border color either individually by element, or in the default .css:

<pre><code>:focus {outline:none;border:1px solid red}
</code></pre>

Obviously replace <code>red</code> with your chosen hex code.

You could also leave the border untouched and control the background color (or image) to highlight the field:

<pre><code>:focus {outline:none;background-color:red}
</code></pre>

:-)

blocks|key|1235670|text|这肯定行得通。橙色轮廓将不再显示..对所有标签通用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1235671|*:focus+{
++++outline:+none;
+++}|code-block|syntax|javascript|1235672|特定于某些标签，例如:+input标签|1235673|input:focus{
+++outline:none;
++}|1235674|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|$]]

This will definitely work. Orange outline won't show up anymore..
Common for all tags:

<pre><code>*:focus {
 outline: none;
 }
</code></pre>

Specific to some tag, ex: input tag

<pre><code>input:focus{
 outline:none;
 }
</code></pre>

blocks|key|1235710|text|我必须执行以下所有操作才能将其完全删除：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1235711|outline-style:+none;
box-shadow:+none;
border-color:+transparent;|code-block|syntax|javascript|1235712|示例：|1235713|button+{
++border-radius:+20px;
++padding:+20px;
}

.no-focusborder:focus+{
++outline-style:+none;
++box-shadow:+none;
++border-color:+transparent;
++background-color:+black;
++color:+white;
}|1235714|Click+in+the+white+space,+then+press+the+"Tab"+key.
<button>Button+1+(unchanged)</button>
<button+class="no-focusborder">Button+2+(no+focus+border,+custom+focus+indicator+to+show+focus+is+present+but+the+unwanted+highlight+is+gone)</button>
 |1235715|​|1235716|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I had to do all of the following to completely remove it:

<pre><code>outline-style: none;
box-shadow: none;
border-color: transparent;
</code></pre>

Example:
<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>button {
 border-radius: 20px;
 padding: 20px;
}

.no-focusborder:focus {
 outline-style: none;
 box-shadow: none;
 border-color: transparent;
 background-color: black;
 color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Click in the white space, then press the "Tab" key.&lt;/p&gt;
&lt;button&gt;Button 1 (unchanged)&lt;/button&gt;
&lt;button class="no-focusborder"&gt;Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)&lt;/button&gt;
&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;</code></pre>
</div>
</div>

blocks|key|1021232|text|问题是当你已经有了一个大纲。Chrome仍然在改变一些东西，这真的很痛苦。我找不到要更改的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1021233|.search+input+{
++outline:+.5em+solid+black;
++width:41%25;
++background-color:white;
++border:none;
++font-size:1.4em;
++padding:+0+0.5em+0+0.5em;
++border-radius:3px;
++margin:0;
++height:2em;
}

.search+input:focus,+.search+input:hover+{
++outline:+.5em+solid+black+!important;
++box-shadow:none;
++border-color:transparent;;
+}

.search+button+{
++border:none;
++outline:+.5em+solid+black;
++color:white;
++font-size:1.4em;
++padding:+0+0.9em+0+0.9em;
++border-radius:+3px;
++margin:0;
++height:2em;
++background:+-webkit-gradient(linear,+left+top,+left+bottom,+from(#4EB4F8),+to(#4198DE));
++background:+-webkit-linear-gradient(#4EB4F8,+#4198DE);
++background:+-moz-linear-gradient(top,+#4EB4F8,+#4198DE);
++background:+-ms-linear-gradient(#4EB4F8,+#4198DE);
++background:+-o-linear-gradient(#4EB4F8,+#4198DE);
++background:+linear-gradient(#4EB4F8,+#4198DE);
++filter:+progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8',+endColorstr='#4198DE');
++zoom:+1;
}|code-block|syntax|javascript|1021234|​|1021235|📷|atomic|offset|length|1021236|1021237|1021238|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/9ee569a66d69b27a37816d5cc0674621.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/b431640d1c4560f682a3bd54d1423d2c.png^0|0|0|0|0|1|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|13|8|@]|9|@$L|14|M|15|1|16]]|A|$]]|$1|N|3|J|5|K|7|17|8|@]|9|@$L|18|M|19|1|1A]]|A|$]]|$1|O|3|H|5|6|7|1B|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W|X|-4]]|Y|$5|S|T|U|A|$V|Z|X|-4]]]]

Problem is when you already have an outline. Chrome still changes something and it's a real pain. I cannot find what to change : 

<pre><code>.search input {
 outline: .5em solid black;
 width:41%;
 background-color:white;
 border:none;
 font-size:1.4em;
 padding: 0 0.5em 0 0.5em;
 border-radius:3px;
 margin:0;
 height:2em;
}

.search input:focus, .search input:hover {
 outline: .5em solid black !important;
 box-shadow:none;
 border-color:transparent;;
 }

.search button {
 border:none;
 outline: .5em solid black;
 color:white;
 font-size:1.4em;
 padding: 0 0.9em 0 0.9em;
 border-radius: 3px;
 margin:0;
 height:2em;
 background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
 background: -webkit-linear-gradient(#4EB4F8, #4198DE);
 background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
 background: -ms-linear-gradient(#4EB4F8, #4198DE);
 background: -o-linear-gradient(#4EB4F8, #4198DE);
 background: linear-gradient(#4EB4F8, #4198DE);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
 zoom: 1;
}
</code></pre>

<img src="https://i.stack.imgur.com/OuN67.png" alt="No focus">
<img src="https://i.stack.imgur.com/ZwNl6.png" alt="With focus">

blocks|key|1235835|text|最简单的方法是使用这样的东西，但请注意，它可能没有那么好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1235836|input+{
++outline:+none;
}|code-block|syntax|javascript|1235837|我希望这对你有用。|1235838|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|$]]

The simpliest way is to use something like this but note that it may not be that good.

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

I hope you find this useful.

blocks|key|1021278|text|border:0;
outline:none;
box-shadow:none;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1021279|这应该能起到作用。|unstyled|1021280|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>border:0;
outline:none;
box-shadow:none;
</code></pre>

This should do the trick.

I have seen that chrome puts a thicker border on <code>:focus</code> but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that? 

<img src="https://farm5.static.flickr.com/4029/4655472389_c68d1216f0_b.jpg" alt="image: chrome :focus border">

How to reset / remove chrome's input highlighting / focus border?

我已经看到chrome在:focus上放了一个更粗的边框，但在我的例子中，它看起来有点不对劲，我也使用了边框半径。有什么方法可以去掉它吗？​​

问如何重置/移除chrome的输入突出显示/焦点边框？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置/移除chrome的输入突出显示/焦点边框？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何重置/移除chrome的输入突出显示/焦点边框？
EN