Ответ 1
li a
{
outline-color: transparent;
}
Я пытаюсь удалить эту границу:
и поскольку он показан только в фокусе, я не могу найти, какой класс перезаписать, используя консоль хром.
Кто-нибудь это сделал и знал, что такое класс, который я должен перезаписать?
Изменить: я полагаю, что это стандартное поведение и здесь вы можете увидеть пример. Я также использую Chrome.
li a
{
outline-color: transparent;
}
Решение, если вы хотите повлиять на фактический элемент .ui.
.ui-state-active a, .ui-state-hover a {
outline: none;
}
Какая разница между ответами Анона и Константина D?
Anon по праву нацелился на фактический "тег" внутри тега "li". Всегда помните, что tabs(); использует "теги" внутри несортированного списка. Фактически отображать навигацию по вкладкам.
CSS тоже влияет на контур на li: теги
.ui-state-active a, .ui-state-hover a {
outline: none;
}
Опустить виджет jQuery UI Tabs
$('#my-tabs').tabs();
Разметка вкладок в HTML
<div id="my-tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 1</a></li>
</ul>
<div id="tab-1"></div>
<div id="tab-2"></div>
</div>
Мне нравится решение Daniel, я бы просто добавил к нему следующее:
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a {
outline: none;
}
.ui-state-visited a
и .ui-state-focus a
остановите его, показывая выделение, когда вы нажимаете другую вкладку/ваша мышь покидает область зависания
Мой ответ - это сочетание всех вышеперечисленных ответов простым и коротким использованием следующих
.ui-tabs .ui-tabs-nav li a {
outline:none;
}
Вы можете переопределить классы ui-state-focus
и ui-state-active
css.
.ui-state-focus {
border: none;
outline: none;
}
.ui-state-active {
border: none;
outline: none;
}
В случае jQuery UI вкладки, переопределяющие ui-state-active
, должны быть достаточными.
Обновление. В вашем случае это не активный класс ui-state, а обычный контур привязки в webkit. Я обновил вашу скрипку: http://jsfiddle.net/ukPW6/4/
принятый ответ работает в Firefox, но у меня были проблемы с ним в Chrome на Mac.
атрибут контурного стиля, похоже, решил это для меня.
.ui-state-focus {
outline-style:none;
}
Если вышеприведенные решения все еще не работают, это вызвано свойством box-shadow
. Попробуйте следующее:
.ui-state-focus:focus, .ui-state-focus, li a {
box-shadow:none;
}
У меня была такая же проблема.
jQuery mobile применяет классы во время выполнения, я пробовал выше решения, но это не сработало для меня, тогда я удалил ui-shadow класс <div data-role="navbar" class="ui-corner-all">
Это выполнило мое требование.