tabIndex上有奇怪的边框 元件

Question

我目前正试图在大型网站（超过30,000页）上更容易访问某些显示/隐藏内容，并且在添加tabindex时遇到一个奇怪的错误，当点击控件打开时，会出现虚线边框隐藏的内容。

用p标签设置你点击淡入显示隐藏内容的div。我根本无法修改HTML，因为整个网站上有数千个这样的内容，所以这就是我必须要处理的内容。目前添加tabindex我正在使用jQuery动态地执行它，为每个p标记添加一个不断增加的选项卡索引。

我的第一个虽然摆脱这个奇怪的边界是尝试CSS：

#content div.showHide p.showHideTitle:focus, 
#content div.showHide p.showHideTitle::focus, 
#content div.showHide p.showHideTitle::-moz-focus-border {
    outline: 0px !important; border: 0px !important;
}

这适用于Chrome和Safari，但在IE8和Firefox 3.6中，当我点击p标签时，我仍然可以获得边框。有关如何摆脱它的任何建议？

Answer 1

什么是：

#content div.showHide p.showHideTitle {
    outline: none !important; 
}

您正在为伪类:focus设置大纲样式，但这可能是“迟到”。这里有一个简单的jsFiddle

Answer 2

我有一个更好的解决方案，混合javascript / css这个问题。

$('[tabindex]').focus(function()
{
    $(this).css('outline', 'none');
});
$('[tabindex]').keyup(function (event)
{
    if(event.keyCode == 9)
    {
        $(this).css('outline', '');
    }
});

这样，如果您选中，它仍然有效，但如果您单击则不然。

Answer 3

虽然不是最有效的CSS选择器，但您可以使用tabindex属性从所有DOM元素中删除它，只需以下CSS：

[tabindex] {
   outline: none !important;
}

Answer 4

你试过用脚本设置css吗？就像是

$("#content div.showHide p.showHideTitle").focus(function () {
     $(this).css('border','0');
});

Answer 5

但是，用户应该在按Tab键聚焦时看到轮廓。