Я использую Toggable Tabs из Twitters Bootstrap
Проблема, которую я имею, даже вы можете видеть из примера. Когда пользователь нажимает на вкладку, активная вкладка имеет пунктирную рамку вокруг нее.
Я использую Firefox 11. Снимок экрана:
Я хочу избавиться от этой пунктирной границы. Кто-нибудь знает, как вы это делаете?
Спасибо
попробуйте использовать outline: 0; в элементе ссылки. см. css-tricks.com/removing-the-dotted-outline
//line 2576 of bootstrap.css
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
outline: 0;
color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
Вы имеете в виду схему, вы можете удалить ее следующим образом:
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
outline:none;
}
Хотя я бы предложил вам оставить его, поскольку он частично помогает людям с ограниченными возможностями и читателям экрана правильно отображать ваш контент, поэтому вы можете повлиять на удобство использования, удалив его.
Используйте следующую CSS на своей странице:
html * {
outline: 0 !important;
}
Чтобы решить проблему для Firefox и всех других браузеров, я бы использовал следующий CSS:
/* Remove dotted outline from image inputs */
input::-moz-focus-inner {
border: 0;
}
/* Remove dotted outline from all links */
a {
outline: 0;
}
Эта граница фокусировки является функцией доступности. Удалив его, вы затрудняете доступ к вашему сайту. Некоторые, я имею в виду людей с ограниченными возможностями.
Это видео помогает мне понять (у него есть инвалидность по мобильности). (Здесь он пересылал, когда он карпает при удалении границы.)
Вы можете использовать образец ниже;)
.nav > li > a {
outline:none;
}
Самый простой способ, если вы скомпилируете свой CSS с Less, отбросьте этот код в свои меньшие файлы
.tab-focus() {
outline: 0;
}
Что это.
Класс или состояние "отключено" не для вспомогательных устройств.
Я не знаю, откуда эта информация, но она полностью ложна. "Отключено" - это STATE, где кнопка или якорь НЕ ВКЛЮЧЕНА. Это означает, что пользователь не может нажать на него. Или, нажатие на него не вызывает никаких действий. Люди с инвалидностью никак не влияют на использование этого тега. BTW- Я веб-разработчик/дизайнер для некоммерческой организации, которая предоставляет поддержку и услуги людям с ограниченными возможностями, и я тестирую свои страницы на различных устройствах, включая устройства для чтения с экрана и другие вспомогательные устройства.
Класс для вкладки с фокусом .focus, а класс для активной вкладки - .active.
Разработка для доступности имеет решающее значение, поэтому всегда проверяйте свой код с помощью валидатора, совместимого с W3C (например, https://validator.w3.org/). Иногда мне приходилось вручную контролировать вкладку или порядок стрелок для вкладок на сайте с помощью JavaScript, но, как правило, Bootstrap обрабатывает его довольно хорошо.
Пример:
Я использую класс .disabled для веб-форм все время. У меня отключена кнопка "Отправить", пока все необходимые поля не содержат правильную информацию. Затем просто удалите класс .disabled и дайте им возможность отправить.
Тем не менее, вам do необходимо включить границу на сфокусированные/зависающие элементы для вспомогательных устройств. Это позволяет пользователю отслеживать, что они "парят" на вашем сайте. Как уже упоминалось выше, вы можете восстановить его, чтобы он лучше соответствовал вашему дизайну или тому подобное, но убедитесь, что у вас есть что указать фокус.
Если кто-то возражает против этого, мне было бы интересно его прочитать.