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;
}

请记住，当按钮处于：焦点状态时，按钮内的元素具有透明边框。因此，您可以在两种状态下清除它，或者只在以下位置将边框设置为透明：

希望对你有所帮助

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

1 个答案: