如何在 ADF 中使用 -moz-focus-inner 删除 Firefox 中按钮的虚线轮廓答案

【问题标题】：how to use -moz-focus-inner in ADF to remove dotted outline of button in firefox如何在 ADF 中使用 -moz-focus-inner 删除 Firefox 中按钮的虚线轮廓
【发布时间】：2014-03-30 15:52:20
【问题描述】：

这里我使用的是 Oracle ADF。我的按钮样式如下：

af|commandButton:text-only {
    background-image: none;
    width: auto;
    height: 30px;
    border: 1px solid #c4ced7;
    border-radius: 2px;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    padding: 2px 10px 3px 10px;
}

af|commandButton:text-only:focus {
    background-image: none;
    width: auto;
    outline: none;
    height: 30px;
    border: 1px solid #c4ced7;
    border-radius: 2px;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    padding: 2px 10px 3px 10px;
}

使用 CSS sn-p 中指定的“outline:none;”移除焦点轮廓。现在，除火狐之外的所有浏览器中都删除了焦点轮廓。根据诊断，我发现 Firefox 使用“-moz-focus-inner”来渲染轮廓。

我在 CSS 中尝试了以下两种方法，但没有成功。

第一种方式：

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

第二种方式：

af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
    border:0;
}

如何在 ADF 中为“-moz-focus-inner”指定样式？

【问题讨论】：

标签： css firefox oracle-adf jdeveloper

【解决方案1】：

我的 xul 程序也有同样的问题。关键是，按钮中隐藏了一些阴影 DOM，它有虚线边框。

这就是我的工作方式：

button *, button:focus *
{
    border: 0;
}

请记住，当按钮不处于 :focus 状态时，按钮内的元素具有透明边框。因此，您必须为两种状态清除它，或者只需在 :focus 处将边框设置为透明。

希望对你也有帮助

【讨论】：