焦点轮廓在Firefox中填充后出现

Posted 2021-04-07

我对按钮有以下样式类-

.buttonStyleClass {
    padding:5px 20px;
}

[当我尝试在Firefox中聚焦按钮时，填充后，聚焦轮廓会出现在按钮内。但是，当您在Chrome中进行验证时，您会发现焦点集中在整个按钮（包括填充）上。

在我的应用程序中，焦点轮廓在firefox中似乎很奇怪，因为它在按钮内显示20像素。

是否有此问题的CSS修复程序？

谢谢，Gopal

答案

实际上，在Firefox和Chrome中，我都在按钮的外面看到了轮廓...签出this fiddle。您可以轻松隐藏轮廓：

.buttonStyleClass { outline: 0; }

如果这不是答案；您能为我们提供您意思的小提琴或屏幕截图吗？

edit

这可能是特定于操作系统的，因为当我在按钮（button { border: 1px solid red; }）上添加显式边框时，我只看到虚线的（内部）轮廓。

您可以使用:-moz-focus-inner选择器删除或更改轮廓，如下所示：

button::-moz-focus-inner { border:0; padding: 0; }

也请检查updated fiddle

另一答案

我意识到这是一个非常老的问题，但实际上还没有人回答这个问题，而且有几个人给出了错误的建议。鉴于我是通过Google到达这里的，其他人可能会带着不好的建议来到这里。

出于可访问的原因，除非您用更好的样式替换它，否则切勿删除这样的样式。

而不是：

button::-moz-focus-inner {
  border:0;
  padding: 0;
}

尝试：

button::-moz-focus-inner {
  padding: inherit;
}

尝试一下

button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }

<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>

另一答案

将此添加到CSS。

.buttonStyleClass:active { 
  outline: 0; 
}

另一答案

您是否正在通过网络浏览器查看？您在查询中说了“应用程序”。

如果我理解正确，您是在说：

Chrome：在填充内的按钮区域周围勾勒轮廓。

Firefox：勾勒出填充外部的区域。

这是浏览器特定的渲染问题。

想到两个解决方案。

不要为您使用填充按钮，而要使用：

.buttonStyleClass {
    height:50px;
    line-height:50px;
    text-align:center;
}

或者使用-webkit定位来编写特定的浏览器css标记。

http://jsfiddle.net/JV6MH/4/

此小提琴应避免在按钮上使用填充，从而使Firefox和chrome中的焦点轮廓相同。

以上是关于焦点轮廓在Firefox中填充后出现的主要内容，如果未能解决你的问题，请参考以下文章

Firefox 在使用 Tab 时会忽略选定元素上的轮廓和焦点样式

如何在不损害可访问性的情况下删除 Firefox 链接中的虚线轮廓？

防止在移动版 Firefox 中输入字段焦点后放大

在选项卡和焦点轮廓未显示时跳过第一个导航锚

焦点在 EditText 上时 ViewPager2 片段内容消失

在Firefox中输入选择外观焦点[重复]