<p>元素tabIndex属性的奇怪边框问题

Question

我目前正在尝试使一个大型网站（超过30,000个页面）上的一些显示/隐藏内容更加易于访问，但是当我在控件上添加tabindex时，出现了一个奇怪的bug，点击该控件会出现虚线边框。

设置了一个p标签，您可以单击它来淡入一个div，然后显示隐藏的内容。由于整个网站有数千个这样的标签，因此我无法修改HTML标记。因此，我只能使用此方式。目前，我通过jQuery动态设置tabindex，对每个p标签添加逐渐增加的tab index。

想要消除这个奇怪的边框，我首先尝试了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标记时仍然会出现边框。有没有什么建议如何摆脱它？

- redroot

---

我不明白。隐藏轮廓线如何帮助辅助功能，让只使用键盘的用户知道焦点在哪里？ - Alohci

Answer 1

关于什么：

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

您正在为伪类:focus设置轮廓样式，但可能已经“太晚”了。 这里有一个简单的jsFiddle

- DanielB

Answer 2

我有一个更好的解决方案来解决这个问题，混合使用JavaScript和CSS。

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

通过这种方法，如果您使用Tab键进行导航仍然有效，但如果您点击则无效。

- James McDonnell

---

+1 这太棒了。正是我所需要的。虽然我仍希望 [tabindex] 在按 Tab 键时能突出显示，但对于使用鼠标单击切换器而言，这确实很烦人。这将成为我的技巧库中的一项！ - Phil Tune

Answer 3

虽然这不是最有效率的CSS选择器，但你可以使用以下CSS来从所有带有tabindex属性的DOM元素中移除它：

[tabindex] {
   outline: none !important;
}

- Aran

Answer 4

你尝试过使用脚本设置 css 吗？类似这样的：

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

- Jason Gennaro

Answer 5

但是，当通过 Tab 键聚焦时，用户应该看到大纲。

- Shrishail Uttagi

Answer 6

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

- cool

---

如果能提供一份书面说明，解释为什么这种方法可以成功而其他答案却失败了，那将不胜感激。 - Pro Q