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

В настоящее время я пытаюсь сделать контент для показа/скрытия более доступным на большом сайте (более 30 000 страниц), и я столкнулся с странной ошибкой при добавлении tabindex, где появляется пунктирная рамка при нажатии на элемент управления для открытия скрытого содержимого.

Настройка с помощью тэга p, который вы нажимаете, чтобы fadeIn 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. Любые предложения о том, как избавиться от него?

Ответы

Ответ 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', '');
    }
});

Таким образом, он все еще работает, если вы входите в аккаунт, но не нажали.

Ответ 3

Хотя это не самый эффективный селектор CSS любым способом, вы можете удалить это из всех элементов DOM с атрибутами tabindex только следующим CSS:

[tabindex] {
   outline: none !important;
}

Ответ 4

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

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