blocks|key|138618|text|请参阅此fiddle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|138619|似乎您必须设置一些边界属性才能使outline:+none工作。如果在border指令中进行注释，则轮廓将消失。|style|CODE|138620|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/UwgeE/^0|4|6|0|0|G|D|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

See this <a href="http://jsfiddle.net/UwgeE/">fiddle</a>.

It seems that you have to set some border property to make <code>outline: none</code> work. If you comment in the border directive, the outline disappears.

blocks|key|138679|text|要取消突出显示，请尝试将此规则添加到输入字段：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138680|-moz-appearance:none;|code-block|syntax|javascript|138681|对于使用相应前缀的基于WebKit的浏览器，也可以这样做：|138682|-webkit-appearance:none;|138683|这应该只使用一个CSS属性来处理任何边框、轮廓等。对于除了WebKit和火狐之外的其他浏览器，最好也包括border和outline属性，以确保浏览器的交叉兼容性。|offset|length|style|CODE|138684|entityMap^0|0|0|0|0|1G|6|1N|7|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]|$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

To remove the highlight try adding this rule to the input field(s): 

<pre><code>-moz-appearance:none;
</code></pre>

This can also be done for WebKit based browsers using the respective prefix: 

<pre><code>-webkit-appearance:none;
</code></pre>

This should take care of any borders, outline, etc. using just one CSS property.
For browsers other than the WebKit pair and Firefox - Opera and IE - it's advisable to include <code>border</code> and <code>outline</code> properties too, ensuring browser cross-compatibility.

blocks|key|356662|text|input+{border:0;+outline:none;}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|356663|应删除所有边框/轮廓。|unstyled|356664|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>input {border:0; outline:none;}
</code></pre>

should remove all borders/outlines.

blocks|key|356693|text|答案比我复述的要简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356694|box-shadow:none;|code-block|syntax|javascript|356695|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|$]]

The answer is simpler than I reliased:

<pre><code>box-shadow:none;
</code></pre>

blocks|key|138760|text|你必须使用:焦点声明。在这种情况下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138761|input:focus+{outline:none;}|code-block|syntax|javascript|138762|项目中的所有输入都不会有蓝色边框。|138763|如果您想要一个特定的属性，请使用以下命令：|138764|input[type=text]:focus+{outline:none;}|138765|希望能有所帮助。=)|138766|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|6|7|T|8|@]|9|@]|A|$]]|$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|$]]

You have to use :focus declaration.
In this case:

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

All the input's in your project won't have the blue border.

If you want a specific attribute, use this:

<pre><code>input[type=text]:focus {outline:none;}
</code></pre>

Hope it helps. =)

blocks|key|356756|text|这应该适用于Firefox上的大多数输入类型：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356757|input::-moz-focus-inner+{+border:+0;+}|code-block|syntax|javascript|356758|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 should work for most input types on Firefox:

<pre><code>input::-moz-focus-inner { border: 0; }
</code></pre>

blocks|key|138813|text|编辑:我的解决方案太复杂了。就是这么简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138814|input:focus+{
++outline:+none;
}|code-block|syntax|javascript|138815|您需要以:focus状态为目标。|138816|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|$]]

Edit: my solution was way to complicated. It's simple as that:

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

You need to target the :focus state.

blocks|key|356785|text|button+{
++++-webkit-tap-highlight-color:transparent;
++++-moz-tap-highlight-color:transparent;
++++-o-tap-highlight-color:transparent;
++++tap-highlight-color:transparent;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|356786|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>button {
 -webkit-tap-highlight-color:transparent;
 -moz-tap-highlight-color:transparent;
 -o-tap-highlight-color:transparent;
 tap-highlight-color:transparent;
}
</code></pre>

blocks|key|138857|text|添加!important并在css文件中定义颜色/背景颜色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|138858|#title+{
++++font-size:+40px;
++++color:+black+!important;
}|code-block|syntax|javascript|138859|entityMap^0|2|A|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|$]]

add <code>!important</code> and define the color/background-color in your css file.

<pre><code>#title {
 font-size: 40px;
 color: black !important;
}
</code></pre>

Using only html and css, how do I disable the blue (in Firefox) highlight color around an active input field. 
I've tried using <code>input {outline:none;}</code> but with no success.
Thanks for the help! =)

ok,ignoring the previous code about outline, I chose the wrong property to change. What I'm trying to get is to simply remove the highlighting (whatever browser, its the bold and colored border that appears) around an active form input field, without changing or disabling the styling. Thanks =)

CSS - Removing input field active highlight

仅使用html和css，如何禁用活动输入字段周围的蓝色(在Firefox中)突出显示颜色。我试过使用input {outline:none;}，但没有成功。谢谢你的帮助！=)好吧，忽略前面关于outline的代码，我选择了错误的属性来更改。我想要的是简单地删除活动表单输入字段周围的高亮显示(无论是哪种浏览器，它都是显示...

问CSS -删除输入字段活动突出显示
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -删除输入字段活动突出显示EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS -删除输入字段活动突出显示
EN