blocks|key|1226207|text|只需为需要的具有outline:none;的元素创建一条CSS规则|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1226208|entityMap^0|8|D|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|$]]

Just make a CSS rule for the elements you want that have <code>outline:none;</code>

blocks|key|1226257|text|CSS技巧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1226258|:focus+{+outline:+none;+}|code-block|syntax|javascript|1226259|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|$]]

CSS trick:

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

blocks|key|1226373|text|在Firefox+53.0中，如果我使用建议的解决方案之一禁用大纲，Firefox将显示默认的大纲。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1226374|但是，如果我使用空白颜色，它不会检测到轮廓是隐藏的：|1226375|input:focus{
+++outline:+1px+solid+rgba(255,255,255,1);
}|code-block|syntax|javascript|1226376|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

With Firefox 53.0, if I disable the outline with one of the proposed solution, Firefox displays the default one.

However, if I use a blank color, it doesn't detect that the outline is hidden:

<pre class="lang-css prettyprint-override"><code>input:focus{
 outline: 1px solid rgba(255,255,255,1);
}
</code></pre>

blocks|key|1011676|text|input::-moz-focus-inner+{+border:+0;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1011677|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>input::-moz-focus-inner { border: 0; }
</code></pre>

blocks|key|1226511|text|经典方法是将outline设置为none：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1226512|outline:+none;|code-block|syntax|javascript|1226513|然而，它在更高版本的浏览器或FireFox上不再起作用。这个小把戏对我很有效：|1226514|outline:+0px+solid+transparent;|1226515|LOL。将来，如果它检测到透明，那么只需替换为稍微高一点的透明：|1226516|outline:+0px+solid+rgba(0,0,0,0.001);|1226517|在一些浏览器中，它也是一个方框：|1226518|outline:none+!important;
outline-width:+0+!important;
box-shadow:+none;
-moz-box-shadow:+none;
-webkit-box-shadow:+none;|1226519|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Classic way is set outline to none:
<pre><code>outline: none;
</code></pre>
However, it didn't work anymore on higher version browser or FireFox.
This trick work for me:
<pre><code>outline: 0px solid transparent;
</code></pre>
LOL. In future, if it detected transparent, then just replace with a little tiny higher transparent:
<pre><code>outline: 0px solid rgba(0,0,0,0.001);
</code></pre>
Some browsers, it was a boxshadow too:
<pre><code>outline:none !important;
outline-width: 0 !important;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
</code></pre>

blocks|key|1011735|text|a+{
outline:+0;
}

a:+hover,
a:+active,
a:+focus+{
+++++outline:+none;
}

input::-moz-focus-inner+{
border:+0;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1011736|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>a {
outline: 0;
}

a: hover,
a: active,
a: focus {
 outline: none;
}

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

blocks|key|1011779|text|:focus+state+-将outline+property设置为0px实体透明；|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1011780|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/pr_outline.asp^0|0|C|F|G|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<code>:focus state</code> - Set the <a href="http://www.w3schools.com/cssref/pr_outline.asp" rel="nofollow">outline property</a> to 0px solid transparent;

blocks|key|1011883|text|$(function()+{
+++++$('a').click(function()+{+$(this).blur();+});
+++++$('input').click(function()+{+$(this).blur();+});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1011884|不要使用CSS，禁用焦点：http://outlinenone.com/这使用其他用户。|unstyled|offset|length|1011885|entityMap|0|LINK|mutability|MUTABLE|url|http://outlinenone.com/^0|0|D|N|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>$(function() {
 $('a').click(function() { $(this).blur(); });
 $('input').click(function() { $(this).blur(); });
});
</code></pre>

Don't use CSS disable focus: <a href="http://outlinenone.com/" rel="nofollow noreferrer">http://outlinenone.com/</a> This use other users.

blocks|key|1011609|text|使用jQuery你可以做到|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1011610|$("#nav+li+a").focus(function(){
++$(this).blur();
});|code-block|syntax|javascript|1011611|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|$]]

Using jQuery you can do

<pre><code>$("#nav li a").focus(function(){
 $(this).blur();
});
</code></pre>

Does anybody know how to disable or manipulate the (in most browsers) dashed border of a dom-element if it has the focus in a tabindex order?

I want to build my own style for a focused element, but it would be great to use the existing feature, because with tabindex it is possible to bind keydown event to the dom-element.

Remove or disable focus border of browser via javascript

jQuery

有谁知道如何禁用或操作dom元素的虚线边框(在大多数浏览器中)，如果它具有tabindex顺序的焦点？我想为一个有焦点的元素构建自己的风格，但是使用现有的特性会很棒，因为使用tabindex可以将keydown事件绑定到dom-element。

问通过javascript移除或禁用浏览器的焦点边框
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过javascript移除或禁用浏览器的焦点边框EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过javascript移除或禁用浏览器的焦点边框
EN