Странная граница на tabIndex для элемента <p>

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, вы можете удалить его из всех элементов DOM с атрибутами tabindex только для следующего CSS:

[tabindex] {
   outline: none !important;
}

Answer 4

Но пользователь должен видеть контур, когда фокусируется нажатием вкладки.

Answer 5

Вы пробовали установить css с помощью своего скрипта? Что-то вроде

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