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

【问题标题】：Strange border on tabIndex on <p> element<p> 元素上 tabIndex 的奇怪边框
【发布时间】：2011-06-01 14:54:07
【问题描述】：

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

使用 p 标签设置，您可以单击它来淡入显示隐藏内容的 div。 我根本无法修改 HTML，因为整个网站有成千上万的 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 标记时，我仍然会看到边框。关于如何摆脱它的任何建议？

【问题讨论】：

我不明白。隐藏轮廓以仅阻止键盘用户知道焦点在哪里有助于可访问性？

标签： jquery html css tabindex

【解决方案1】：

关于：

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

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

【讨论】：

【解决方案2】：

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

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

这种方式，如果你通过 Tab 仍然可以工作，但如果你点击就不行。

【讨论】：

+1 这太棒了。正是我需要的。仍然希望[tabindex] 在切换时突出显示，但是对于切换器来说，在鼠标单击时得到那个烦人的轮廓确实很烦人。这将进入我的包包技巧！

【解决方案3】：

尽管无论如何都不是最有效的 CSS 选择器，但您可以从所有具有 tabindex 属性的 DOM 元素中删除它，只需使用以下 CSS：

[tabindex] {
   outline: none !important;
}

【讨论】：

【解决方案4】：

您是否尝试过使用脚本设置css？类似的东西

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

【讨论】：

【解决方案5】：

但是，当通过 Tab 键聚焦时，用户应该会看到轮廓。

【讨论】：

【解决方案6】：

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

【讨论】：

我们将不胜感激书面解释为什么这可能会在其他答案失败的情况下起作用。