我可以使Firefox在此链接上不显示点状的丑陋焦点：
1
2
3
| a:focus {
outline: none;
} |
但是我该怎么做标签呢？ 当我这样做时：
1
2
3
| button:focus {
outline: none;
} |
单击这些按钮时，它们的焦点轮廓仍为虚线。
(是的，我知道这是一个可用性问题，但是我想提供适合于设计的自己的焦点提示，而不是难看的灰色点)
1
2
3
| button::-moz-focus-inner {
border: 0;
} |
无需定义选择器。
1
2
| :focus {outline:none;}
::-moz-focus-inner {border:0;} |
但是，这违反了W3C的可访问性最佳做法。该大纲可帮助那些使用键盘导航的人。
https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples
如果您更喜欢使用CSS摆脱虚线轮廓：
1
2
3
4
5
6
7
8
9
10
| /*for FireFox*/
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
{
border : 0px;
}
/*for IE8 */
input[type="submit"]:focus, input[type="button"]:focus
{
outline : none;
} |
以下是在我想使用LINKS(共享)的情况下为我工作的方式(如果有人感兴趣)。
1
2
3
| a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
} |
干杯!
1
2
3
4
| :focus, :active {
outline: 0;
border: 0;
} |
[更新]此解决方案不再起作用。对我有用的解决方案是这个https://stackoverflow.com/a/3844452/925560
标记为正确的答案不适用于Firefox 24.0。
为了删除Firefox在按钮和锚标记上的虚线轮廓，我添加了以下代码：
1
2
3
4
5
6
7
8
9
10
| a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
} |
我在这里找到了解决方案：http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
在这里尝试了大多数答案，但是没有一个对我有用。当我意识到也必须摆脱Chrome上按钮的蓝色轮廓时，我找到了另一种解决方案。从Chrome中的CSS自定义样式按钮中删除蓝色边框
这段代码在Windows 7的Firefox 30版本上对我有用。也许它可以对其他人有所帮助:)
1
| button:focus {outline:0 !important;} |
使用CSS在Firefox中无法消除这些点状的焦点。
如果您有权访问Web应用程序所在的计算机，请转至Firefox中的about：config并将browser.display.focus_ring_width设置为0。然后Firefox根本不会显示任何虚线边框。
以下错误说明了该主题：https://bugzilla.mozilla.org/show_bug.cgi?id=74225
在网络上可以找到许多解决方案，其中许多工作有效，但是要强制这样做，因此一旦使用以下命令，绝对没有任何内容可以突出显示/聚焦：
1
2
3
4
5
| ::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
} |
这只会增加一点点额外的安全性并达成协议！
使用此代码在Firefox 46和Chrome 49上进行了测试。
1
2
3
| input:focus, textarea:focus, button:focus {
outline: none !important;
} |
之前(可见白点)
之后(白点不可见)
如果只想应用在几个输入字段，按钮等上，请使用更具体的代码。
1
2
3
| input[type=text] {
outline: none !important;
} |
快乐编码！
只需为选择框添加此CSS
1
2
3
4
| select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
} |
这对我来说很好。
在大多数情况下，如果不将!important添加到CSS代码中，它将无法正常工作。
因此，不要忘记添加!important
1
2
3
| a, a:active, a:focus{
outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
} |
或任何其他代码：
1
2
3
| button::-moz-focus-inner {
border: 0 !important;
} |
如果您在按钮上有边框，并且想在Firefox中隐藏虚线轮廓而不删除边框(因此按钮上有多余的宽度)，则可以使用：
1
2
3
| .button::-moz-focus-inner {
border-color: transparent;
} |
看来实现此目标的唯一方法是通过设置
1
| browser.display.focus_ring_width = 0 |
在about：config中基于每个浏览器。
这将得到范围控制：
1
2
3
4
5
6
7
8
9
| :focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
} |
来自：从Firefox中的范围输入元素中删除虚线轮廓
您可能需要加强重点而不是摆脱重点。
1
2
3
| button::-moz-focus-inner {border: 2px solid transparent;}
button:focus::-moz-focus-inner {border-color: blue} |
我认为您应该通过删除焦点轮廓来真正了解自己在做什么，因为它可能会使键盘导航和辅助功能变得混乱。
如果由于设计问题需要将其取出，请在按钮上添加:focus状态，以其他视觉提示替换该状态，例如将边框更改为较亮的颜色或类似的颜色。
有时，我觉得有必要将烦人的轮廓删除，但我总是准备备用焦点视觉提示。
永远不要使用blur() js函数。使用::-moz-focus-inner伪类。
1
| button::-moz-focus-inner { border: 0; } |
其中button可以是您要禁用其行为的任何CSS选择器。
以下CSS代码可消除此问题：
1
2
3
4
5
6
7
8
9
10
| a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0;
outline : 0;
} |
从链接，按钮和输入元素中删除虚线轮廓。
1
2
3
4
5
6
7
8
| a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
outline : 0;
} |
您可以在CSS中尝试button::-moz-focus-inner {border: 0px solid transparent;}。
在尝试了上述多种选择之后，以下仅对我有用。
1
2
| *:focus, *:visited, *:active, *:hover { outline:0 !important;}
*::-moz-focus-inner {border:0;} |
是的，不要错过！重要
1
2
3
| button::-moz-focus-inner {
border: 0 !important;
} |
这适用于Firefox v-27.0
1
2
3
| .buttonClassName:focus {
outline:none;
} |
我与Bootstrap 3一起使用了这段代码。第二组规则只是撤消引导程序对焦点/活动按钮的作用：
1
2
3
4
5
6
7
| button::-moz-focus-inner {
border: 0; /*removes dotted lines around buttons*/
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
outline:0;
} |
注意，您的自定义css文件应位于html代码中的Bootstrap css文件之后，以覆盖它。
