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

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

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

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

enter image description here

Вот мой 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;
}
+675
источник поделиться
21 ответ

Просто добавьте это в свой 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>
+1316
источник

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

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

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

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

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

Вот кнопки, когда они получают фокус: Bootstrap Buttons in Focused State

Здесь кнопки при нажатии: enter image description here

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

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

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

+261
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

*:focus {outline:none}

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

*:focus {outline:none !important}
+53
источник

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

button:focus {outline:0 !important;}

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

+46
источник

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

button:focus {
  outline:none;
  box-shadow: none;
}
+38
источник

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

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

+18
источник

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

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
+11
источник

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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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

+8
источник

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

element:active:focus {
    outline: 0;
}

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

+7
источник

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

button:focus {
    box-shadow:none;
}
+4
источник

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

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

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

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

результат:

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

+4
источник

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

*{
outline: none;
}

или

*{
outline-style: none;
}
+3
источник

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

input:focus {outline:0;}
+2
источник

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

+2
источник

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

+2
источник

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

.custom-button {
    outline: none
}
+2
источник

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

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

+1
источник

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

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

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

}

0
источник

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

button:focus { outline: none !important; box-shadow: none !important; }
0
источник

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

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
0
источник

Посмотрите другие вопросы по меткам или Задайте вопрос