Удалите синюю рамку из пользовательской кнопки CSS в Chrome


812

Я работаю над веб-страницей и хочу использовать индивидуально оформленные <button>теги. Так что с помощью CSS, я сказал: border: none. Теперь он отлично работает в Safari, но в Chrome, когда я нажимаю на одну из кнопок, вокруг него появляется синяя рамка. Я думал button:active { outline: none }или button:focus { outline:none }будет работать, но ни один не делает. Любые идеи?

Вот как это выглядит до нажатия (и как я хочу, чтобы оно все еще выглядело после нажатия):

И это граница, о которой я говорю:

введите описание изображения здесь

Вот мой CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

1
Выглядит нормально для меня? jsbin.com/oSAdovun/1/edit
davidpauljunior

Я не уверен, почему это работает в вашей демонстрации .. Это делает это здесь: jsfiddle.net/NgL8H @davidpauljunior
eshellborn

5
Я добавил правило фокуса внизу, которое, как вы сказали, не сработало, но оно выглядит так: jsfiddle.net/NgL8H/1
davidpauljunior

21
Не следует полностью удалять контур - людям с ограниченными возможностями - и тем, кто, как я, часто пользуется клавиатурой, потому что она быстрая, - она ​​нужна для навигации. Было бы намного лучше изменить стиль контура так, как вам нравится.
Крис Б.

3
Пожалуйста, не устанавливайте outline: noneтак, если только вы не готовы восполнить потерю доступности. Смотрите этот сайт: outlinenone.com
Flimm

Ответы:


1538

Делать это не рекомендуется, так как это ограничивает доступность вашего сайта; Для получения дополнительной информации см. этот пост .

Тем не менее, если вы настаиваете, этот CSS должен работать:

button:focus {outline:0;}

Проверьте это или JSFiddle: http://jsfiddle.net/u4pXu/

Или в этом фрагменте:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>


49
Не должно ли это быть на самом деле outline: none;или это не имеет значения?
Генрирайт

2
@henrywright Хорошо, ОП попробовал это и не работал на него.
diosney

58
Пожалуйста, никогда не делай этого. Ваша незначительная жалоба не имеет отношения к массовой проблеме доступности, которая становится такой
phazei

20
Вы должны определенно изменить стиль, а не скрывать это полностью. В этом случае попробуйте что-то вроде button:focus{ outline-color: #A75000 }... вместо того, чтобы скрывать индикатор, вы меняете его на темно-оранжевый, который соответствует стилю.
облачные работы

3
@ SeanO'Brien предоставил ОП данной ситуации, может быть, для сайта, который имеет 5 пользователей, все в состоянии здоровья. Но, вероятно, большинство из 1123 человек, проголосовавших за это, считают, что это правильный способ сделать что-то для их ситуации, но на самом деле это не так, как дискриминация.
alexrogers

296

Подождите! Есть причина для этого ужасного плана!

Прежде чем удалить этот уродливый синий контур, вы можете принять во внимание доступность . По умолчанию этот синий контур размещается на фокусируемых элементах. Это сделано для того, чтобы пользователи с проблемами доступности могли сфокусировать эту кнопку, нажав на нее. Некоторые пользователи не имеют двигательных навыков для использования мыши и должны использовать только клавиатуру (или другое устройство ввода) для взаимодействия с компьютером. Когда вы удаляете синий контур, больше нет визуального индикатора того, на каком элементе находится фокус. Если вы собираетесь удалить синий контур, вы должны заменить его другим типом визуальной индикации того, что кнопка находится в фокусе.

Возможное решение: затемнить кнопки при фокусировке

Для приведенных ниже примеров синий контур Chrome был сначала удален с помощью button:focus { outline:0 !important; }

Вот основные кнопки Bootstrap, которые выглядят нормально: Кнопки начальной загрузки в нормальном состоянии

Вот кнопки, когда они получают фокус: Кнопки начальной загрузки в сфокусированном состоянии

Вот кнопки, когда они нажаты: введите описание изображения здесь

Как вы можете видеть, кнопки немного темнее, когда они получают фокус. Лично я бы порекомендовал сделать фокусированные кнопки еще темнее, чтобы было очень заметное различие между состоянием фокусировки и нормальным состоянием кнопки.

Это не только для инвалидов

Делать ваш сайт более доступным - это то, что часто упускают из виду, но может помочь создать более продуктивную работу на вашем сайте. Есть много обычных пользователей, которые используют команды клавиатуры для навигации по веб-сайтам, чтобы держать руки на клавиатуре.


40
Проблема в Chrome - это происходит даже по щелчку, а не просто по табуляции (логическая реализация встречается в большинстве браузеров). Так что на самом деле Google сокращает доступность, так как большинство разработчиков просто отключают это (в Chrome). Больше времени было потрачено на исследование / исправление проблем, связанных с Google / Chrome (сохранение пароля, поддержка электронной почты и CSS)
RunLoop

3
Ты прав! Для того, чтобы доступ в счет при удалении контура, необходимо немного JavaScript: paciellogroup.com/blog/2012/04/...
MEMS

Вы даже не можете оформить / отформатировать комментарий так, как вы можете ответить, хотя. сложно дать отзыв на этом уровне детализации исключительно через комментарий.
A-Dubb

@RunLoop Как удалить или изменить синюю рамку после щелчка? Это можно сделать с помощью CSS или требуется Javascript?
Ник

люди с такими проблемами могут просто использовать vimium-ff
yukashima huksay

60

Я просто удаляю схему из всех тегов на странице, выбирая все и применяя схему: ни ко всем :)

*:focus {outline:none}

Как упоминалось в Bagofcole, вам может понадобиться добавить! Важный, чтобы стиль выглядел так:

*:focus {outline:none !important}

6
Пожалуйста, не делайте этого. Пользователи, которые перемещаются по вашей странице с помощью клавиатуры, не смогут увидеть элемент, который в данный момент сфокусирован. Вместо того, чтобы скрывать контур, размыть элемент, если событие щелчка происходит от мыши.
Joepio

Есть в основном наверняка какой-то другой стиль фокусировки ...
Arziel

47

В моем случае этой проблемы я должен был указать box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

4
Спасибо за ваш пост! Свойство "box-shadow" было главным в моем случае.
Nightking

1
Это была та же проблема для меня. Не то чтобы это уместно, но я использовал Sage Theme от Roots в Chrome на Ubuntu 17.10.
Спенсер Хилл

1
Только это сработало послеbox-shadow
sura2k

1
Я должен был добавить! Важно, чтобы заставить его работать, вероятно, у начальной загрузки есть определенное определение для этого где-то
webMan

1
это сработало для меня приятель !, спасибо за размещение решения. ура
theITvideos

44

Не забудьте !importantдекларацию, для лучшего результата

button:focus {outline:0 !important;}

Правило, которое имеет свойство! Важное, всегда будет применяться независимо от того, где это правило появляется в документе CSS.


14
"для лучшего результата"? Не могли бы вы объяснить, что важно?
Popnoodles

5
Но можете ли вы объяснить, что он делает? «По той причине, что она существует» не объясняет людям, которые не знают ее причину, в чем ее причина.
Popnoodles

48
! важный должен использоваться редко, и только чтобы убедиться, что что-то не должно быть перезаписано последующими правилами. Вы должны нацелить свои элементы с правильным селектором при переписывании предыдущих правил.
Popnoodles

24
Использование! Важно редко оправдано. Вы всегда должны использовать селекторы CSS так, чтобы они имели больше смысла, а не использовать! Важный только потому, что он дает «лучший результат».
Ронен Сайпис

5
Пожалуйста, не делай этого. В то время как технически это отвечает на вопрос OP, сбрасывание всех указаний на положение фокуса с outline:0 !importantплохим UX и плохой практикой dev. Если вы делаете это, пожалуйста, убедитесь, что вы делаете что-то еще, чтобы указать положение фокуса (например, изменение цвета фона элемента).
облачные работы

26

Удаление outlineужасно для доступности! В идеале кольцо фокусировки появляется только тогда, когда пользователь намеревается использовать клавиатуру .

Использование : фокус-видимый . В настоящее время это предложение W3C для стилизации фокуса только с клавиатуры с использованием CSS, и поддерживается в Firefox ( caniuse ). Пока другие крупные браузеры не поддержат его, вы можете использовать этот надежный полифилл .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Я также написал более подробный пост на всякий случай, если вам нужно больше информации.


1
Имейте в виду, AFAIK, это не обязательно должно быть outlineтаковым, если: фокусное состояние становится ясно видимым с помощью других средств, таких как border, background-color, box-shadowи т. Д.
Már Örlygsson

2
Лучший ответ! Ваш пост стоит прочитать (а я сейчас смотрю на остальную часть вашего блога 😅). Фокусно-видимый пакет npm действительно находится там, где и сейчас.
FelDev

1
Это определенно лучшее решение. С помощью всего лишь нескольких строк кода я избавился от этой надоедливой синей рамки при нажатии, сохранив ее при использовании клавиатуры. Спасибо!
Pesta

1
Это правильные данные? Этот селектор поддерживается в Chrome, а не в Firefox. developer.mozilla.org/en-US/docs/Web/CSS/…
Кевин Саттл

Похоже, что в Firefox селектор вызывается :-moz-focusring, но, в отличие от документов, он не делает различий между кликом и фокусом вкладки. В Chrome, на данный момент вам нужно включить определенные флаги, чтобы он работал
phil294

12

Добавьте это в свой файл CSS.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

3
благодарю вас. работал, но MDN говорит: эта функция нестандартная и не соответствует стандартам. Не используйте его на рабочих сайтах, выходящих в Интернет: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализациями, и поведение может измениться в будущем.
Бехнам Мохаммади

8

Используйте это:

:active {
    outline:none;
}

или это, если это не работает:

:active {
   outline:none !important;
}

Это работает для меня (FF и Chrome, по крайней мере). Вместо нацеливания на :focusсостояние, просто нацельтесь на :activeсостояние, и это уберет эстетически навязчивую подсветку в вашем браузере, когда пользователь нажимает на ссылку. Но он все равно сохранит состояния фокуса, когда пользователь с вкладками инвалидности или Shift-вкладками через страницу. Обе стороны счастливы. :)


4
Зачем редактировать мой ответ, если вы собираетесь заменить мою уменьшенную версию тем же кодом, но расширенным? Это не прояснило это лучше для пользователей. Вы получаете ответные баллы за это или что-то? LOL ...
Чук

3
смысл сайтов StackExchange, подобных этим, состоит в том, чтобы иметь ответы, которые помогут любому, кто их читает, понять. Для этой цели ответ с кратким минимизированным кодом не так полезен, как читаемый код. Улучшение ответов, делая их более читабельными, является нормальным способом улучшить сайт для всех.
bignose

7

для этой проблемы:

введите описание изображения здесь

использовать этот:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

результат:

введите описание изображения здесь


7

Для тех, кто использует Bootstrap и имеет эту проблему, они используют: active: focus, а также just: active и: focus, так что вам понадобится:

element:active:focus {
    outline: 0;
}

Надеюсь, сэкономил кому-то время на то, чтобы выяснить это, ударил меня по голове, удивляясь, почему такая простая вещь не работает.


6

Большинство решений не будут работать, если вы используете Bootstrap 4.1 и, возможно, другие версии. После долгих ударов головой я обнаружил, что вам нужно применить класс shadow-none :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>


4

Исправление для Chrome и других браузеров

button:focus { outline: none !important; box-shadow: none !important; }

3

попробуйте этот код для всех элементов, у которых есть проблема с синей рамкой

*{
outline: none;
}

или

*{
outline-style: none;
}

3

Еще один способ решить проблему доступности, о которой здесь еще не говорилось, - немного Javascript . Кредиты идут этот проницательный блог пост от hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

Подход здесь действительно прост, но эффективен: добавление класса, когда люди начинают использовать клавишу табуляции для навигации по странице (и, при необходимости, удаление его при повторном переключении на мышь. Затем вы можете использовать этот класс, чтобы отобразить контур фокуса или нет ,

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

3

Я столкнулся с той же проблемой, поэтому я использовал простой CSS-

.custom-button {
    outline: none
}

2

Если вы хотите удалить тот же эффект при вводе, вы можете добавить следующий код, а также кнопку.

input:focus {outline:0;}

2

Пока все современные браузеры не начнут поддерживать css-selector : focus-visible ,
самый простой и, возможно, лучший способ сохранить доступность - это удалить этот хитрый фокус только для пользователей мыши и сохранить его для пользователей клавиатуры :

1. Используйте этот крошечный полифилл (около 10 КБ): https://github.com/WICG/focus-visible
2. Добавьте следующий код где-нибудь в вашем CSS:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Браузерная поддержка css4-селектора: фокус-видимый сейчас очень слабый:
https://caniuse.com/#search=focus-visible



1

Это проблема в семье Chrome и была там навсегда.

Ошибка была поднята https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Это может быть показано здесь: https://codepen.io/anon/pen/Jedvwj как только вы добавите границу к чему-либо кнопочному (скажем, роль = кнопка добавлена ​​в тег, например) Chrome не работает и устанавливает состояние фокуса, когда вы щелкаете мышью.

Я настоятельно рекомендую использовать это исправление: https://github.com/wicg/focus-visible .

Просто сделайте следующее

npm install --save focus-visible

Добавьте скрипт в ваш HTML:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

или импортируйте в ваш основной входной файл, если используете webpack или что-то подобное:

import 'focus-visible/dist/focus-visible.min';

затем поместите это в ваш файл CSS:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Вы можете просто установить:

button:focus {outline:0;}

но если у вас большое количество пользователей, вы ставите в невыгодное положение тех, кто не может использовать мышь, или тех, кто просто хочет использовать свою клавиатуру для скорости.


1

У меня была такая же проблема с начальной загрузкой. Я решил как с контуром и box-shadow

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.