blocks|key|2671322|text|根据MDN|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2671323|大纲CSS属性是在一个声明中设置各种大纲属性的速记:大纲样式、大纲宽度和大纲颜色。|blockquote|2671324|因此，当我们将大纲设置为none或0时，实际上设置了3个属性|style|CODE|2671325|提纲式|unordered-list-item|2671326|轮廓宽度|2671327|轮廓-颜色|2671328|这是从chrome+developer选项获得的：|2671329|outline:none;将设置：|2671330|outline-color:+initial;
outline-style:+none;
outline-width:+initial;|code-block|syntax|javascript|2671331|outline:0;将设置：|2671332|outline-color:+initial;
outline-style:+initial;
outline-width:+0px;|2671333|在您的情况下，设置outline:none应该是一种技巧。|BOLD|2671334|希望这能有所帮助。编码愉快！|2671335|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/35648667/outline-none-vs-outline-0^0|2|3|0|0|0|C|4|H|1|0|0|0|0|0|0|D|0|0|0|A|0|0|9|C|9|C|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|D|3|E|5|F|7|1L|8|@]|9|@]|C|$]]|$1|G|3|H|5|6|7|1M|8|@$A|1N|B|1O|I|J]|$A|1P|B|1Q|I|J]]|9|@]|C|$]]|$1|K|3|L|5|M|7|1R|8|@]|9|@]|C|$]]|$1|N|3|O|5|M|7|1S|8|@]|9|@]|C|$]]|$1|P|3|Q|5|M|7|1T|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1U|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|1V|8|@$A|1W|B|1X|I|J]]|9|@]|C|$]]|$1|V|3|W|5|X|7|1Y|8|@]|9|@]|C|$Y|Z]]|$1|10|3|11|5|6|7|1Z|8|@$A|20|B|21|I|J]]|9|@]|C|$]]|$1|12|3|13|5|X|7|22|8|@]|9|@]|C|$Y|Z]]|$1|14|3|15|5|6|7|23|8|@$A|24|B|25|I|16]|$A|26|B|27|I|J]]|9|@]|C|$]]|$1|17|3|18|5|6|7|28|8|@]|9|@]|C|$]]|$1|19|3|-4|5|6|7|29|8|@]|9|@]|C|$]]]|1A|$1B|$5|1C|1D|1E|C|$1F|1G]]]]

<p>According to <a href="https://stackoverflow.com/questions/35648667/outline-none-vs-outline-0">MDN</a></p>

<blockquote>
  <p>The outline CSS property is a shorthand to set various outline properties in a single declaration: outline-style, outline-width, and outline-color.</p>
</blockquote>

<p>So when we set outline to <code>none</code> or <code>0</code>, we are actually setting 3 properties </p>

<ul>
<li>outline-style </li>
<li>outline-width</li>
<li>outline-color</li>
</ul>

<p>This is obtain from chrome developer options:</p>

<p><code>outline:none;</code> will set:</p>

<pre><code>outline-color: initial;
outline-style: none;
outline-width: initial;
</code></pre>

<p><code>outline:0;</code> will set:</p>

<pre><code>outline-color: initial;
outline-style: initial;
outline-width: 0px;
</code></pre>

<p>In your case setting <strong><code>outline:none</code></strong> should do a trick.</p>

<p>Hope this helps. Happy Coding!!!</p>


blocks|key|2040936|text|此边框用于显示元素的焦点。不过，您可以移除它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2040937|input:focus{
++++outline:+none;
}|code-block|syntax|javascript|2040938|您可能希望为用户添加一些其他方法，以了解哪些元素具有键盘焦点，尽管这样做是为了提高可用性。|2040939|Chrome还将用于高亮显示其他元素，如DIV用作调制解调器。为了防止这些元素和所有其他元素的突出显示，您可以这样做：|2040940|*:focus+{
++++outline:+none;
}|2040941|entityMap^0|0|0|0|0|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|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This border is used to show that the element is focused. You can remove it, though:</p>

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

<p>You may want to add some other way for users to know what element has keyboard focus though for usability.</p>

<p>Chrome will also apply to highlight to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:</p>

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


blocks|key|1230622|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230623|*:focus+{
++++outline:+none;
}|code-block|syntax|javascript|1230624|<div>
++<input+/>
</div>
<div>
++<textarea></textarea>
</div>
<div>
++<button>Test</button>
</div>|1230625|1230626|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><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>*:focus {
    outline: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;input /&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;textarea&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;button&gt;Test&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2671285|text|只需添加以下内容(不需要:focus选择器)-：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2671286|input{
++outline:+none;
}|code-block|syntax|javascript|2671287|entityMap^0|C|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You just need to add this (no need for the <code>:focus</code> selector)-: </p>

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


blocks|key|2040881|text|这就是你所期望的吗？您可以使用outline:none删除它，也可以通过将颜色作为边框添加其他颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2040882|​|2040883|input:focus+{
++outline:+none;
++border:+1px+solid+red;
++box-shadow:+0+0+10px+#719ECE;
}|code-block|syntax|javascript|2040884|<input+type="text"></input>|2040885|2040886|entityMap^0|F|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Is this what you are expecting ? you can remove it by using <code>outline:none</code>
And you can add other color to it by giving the color as border.</p>

<p><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:focus {
  outline: none;
  border: 1px solid red;
  box-shadow: 0 0 10px #719ECE;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text"&gt;&lt;/input&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2671292|text|在不检查问题可复制的代码的情况下，提出解决方案并非易事。即使它看起来像一个大纲，它也可以实现为一个border，box-shadow或其他东西。例如，在引导中，表单元素的:focus上有一个厚厚的浅蓝边框，它们实际上是box-shadow。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2671293|因此，检查元素及其伪类(如:hover、:focus、:active等)，找出蓝色边框的确切效果，然后用自己的样式覆盖特定的样式。|2671294|entityMap^0|1D|6|1K|A|2D|6|31|A|0|D|6|K|6|R|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|I|$]]

<p>It is not easy to suggest a solution with out checking the code where issue is reproducible. Even it looks like an outline, it can the implemented as a <code>border</code>, <code>box-shadow</code> or something else. for example, in bootstrap, there is a thick light blue border on <code>:focus</code> of the form elements and they are actually <code>box-shadow</code>. </p>

<p>So you inspect your element and its pseudo classes like <code>:hover</code>, <code>:focus</code>, <code>:active</code> etc and find out exactly what makes the blue border effect and then overwrite that particular style with your own style.</p>


<p>I'm using an input component and trying to remove the outline blue default color, but everything I tried failed</p>
<p>I already tried to change the CSS focus outline and box-shadow attributes</p>
<pre><code>:focus {
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none !important
}
</code></pre>
<p>I expect the blue outline to disappear when focused on the input component</p>
<p><a href="https://i.stack.imgur.com/RQTmA.png" rel="nofollow noreferrer">input outline</a></p>


Remove input blue outline color

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用一个输入组件并试图删除大纲蓝色默认颜色，但我尝试的所有操作都失败了我已经尝试更改CSS焦点大纲和框影属性。:focus {  outline: 0px !important;  -webkit-appearance: none;  box-shadow: none !important}当聚焦于输入组件时，我希望蓝色轮廓会消失。

问删除输入蓝色轮廓颜色
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除输入蓝色轮廓颜色EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问删除输入蓝色轮廓颜色
EN