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

Я работаю над веб-страницей и хочу использовать индивидуально оформленные <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;
}

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

Тем не менее, если вы настаиваете, этот 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>

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

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

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

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

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

Вот кнопки, когда они получают фокус:

Вот кнопки, когда они нажаты:

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

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

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

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

*:focus {outline:none}

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

*:focus {outline:none !important}

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

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

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

button:focus {outline:0 !important;}

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

Удаление 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;
}

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

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

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

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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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

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

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

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

результат:

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

element:active:focus {
    outline: 0;
}

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

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

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

Вот что сработало для меня:

button:focus {
    box-shadow:none;
}

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

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

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

*{
outline: none;
}

или

*{
outline-style: none;
}

Еще один способ решить проблему доступности, о которой здесь еще не говорилось, - немного 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);

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

.custom-button {
    outline: none
}

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

input:focus {outline:0;}

Пока все современные браузеры не начнут поддерживать 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

Просто пиши outline:none;. Нет необходимости использовать псевдоэлементfocus

Это проблема в семье 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;}

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

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

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}