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键聚焦时，用户应该会看到轮廓。

Answer 6

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

<p>元素</p>上tabIndex上的奇怪边框

6 个答案: