css - 如何在 ADF 中使用 -moz-focus-inner 去除 firefox 中按钮的虚线轮廓

Question

这里我使用的是 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 代码段中指定的“outline:none;”删除焦点轮廓。 现在，焦点轮廓在除 firefox 之外的所有浏览器中都被删除。 根据诊断，我发现 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”指定样式？

Answer 1

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

我是这样实现的:

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

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

希望对你也有帮助