选项卡上的奇怪边框索引<p>元素

Question

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

使用p标记设置，单击该标记可在显示隐藏内容的div中淡出我根本无法修改HTML，因为整个网站上有成千上万的HTML，所以这就是我必须处理的。目前，我正在使用jQuery动态添加tabindex，为每个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键聚焦时，用户应该会看到轮廓。

Answer 6

<div class="className" tabIndex="1" style={{outline: 0}}>
    <p> Try this... I hope this works!</p>
<div>