Удалите синюю рамку из кнопки css custom-styleled в Chrome

Ответ 1

Просто добавьте это в свой 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>

Ответ 2

Подождите! Там есть причина для этого уродливого наброска!

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

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

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

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

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

Здесь кнопки при нажатии:

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

Это не только для отключенных пользователей

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

Ответ 3

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

*:focus {outline:none}

В качестве упомянутого bagofcole вам может понадобиться добавить! важно также, поэтому стиль будет выглядеть следующим образом:

*:focus {outline:none !important}

Ответ 4

Не забывайте объявление !important, для лучшего результата

button:focus {outline:0 !important;}

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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

Ответ 9

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

element:active:focus {
    outline: 0;
}

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

Ответ 10

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

button:focus {
    box-shadow:none;
}

Ответ 11

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

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

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

результат:

Ответ 12

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

*{
outline: none;
}

или

*{
outline-style: none;
}

Ответ 13

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

input:focus {outline:0;}

Ответ 14

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

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

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

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

Ответ 15

Просто напишите outline:none; , Не нужно использовать focus

Ответ 16

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

.custom-button {
    outline: none
}

Ответ 17

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

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

Ответ 18

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

Ответ 19

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

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

}

Ответ 20

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

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

Ответ 21

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

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