Я хочу удалить контур на активной вкладке пользовательского интерфейса jQuery (или, по крайней мере, изменить цвет).
Работает из в этом примере, Я пробовал это безуспешно:
<style>
#tabs .ui-state-focus
{
outline: none;
}
</style>
(на основе подсказки из этого вопроса ).
Какой трюк удаляет контур с активной вкладки?
Я не считаю, что класс focus, который вам нужно настроить, это CSS psuedo-class :focus
.ui-state-focus:focus { outline:1px dotted red !important }
если это работает, перейдите к {outline:none}, чтобы удалить его. Вы как бы поднимаете свою доступность, беспокоясь об этом, хотя FYI.
Есть много способов сделать это. Вот два примера (я предлагаю вариант 2):
Вариант 1
Удалите контур из всех элементов, которые используют класс .ui-widget:
.ui-widget * { outline: none; }
Здесь рабочая скрипка.
Вариант 2
Сделайте прозрачный контурный цвет:
#tabs li a
{
outline-color: none;
}
Здесь рабочая скрипка.
Мне удалось удалить его с помощью
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
outline:none;
}
если вы хотите удалить контур только на определенных вкладках, я предлагаю вам использовать следующее:
$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group
внутри тега script вашего html.
Вы можете отключить контур, указав outline-width: 0;
#tabs li a
{
outline-width: 0;
}
Более общее решение без использования идентификаторов будет:
.ui-tabs ul li a
{
outline-width: 0;
}
Я должен был сделать это, чтобы предотвратить также возможный начальный фокус настройки вкладок:
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
outline:none;
}
вы можете попробовать это
a:focus { outline: none; }
Чтобы сделать его более понятным, контур появляется на элементе внутри ul.ui-tabs li.ui-tabs-nav. Большинство приведенных выше примеров забыли упомянуть об этом: так вот рабочий ответ на исходный вопрос:
.ui-tabs-nav .ui-state-focus a {
outline: none;
}