it-swarm.com.ru

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

Я работаю над веб-страницей и хочу использовать пользовательские теги <button>. Итак, с помощью CSS я сказал: border: none. Теперь он отлично работает в Safari, но в Chrome, когда я нажимаю на одну из кнопок, вокруг него появляется синяя рамка. Я думал, что button:active { 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;
}
604
eshellborn

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

1229
Ronen Cypis

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

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

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

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

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

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

Вот кнопки, когда они нажаты: enter image description here

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

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

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

245
Nathan

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

*:focus {outline:none}

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

*:focus {outline:none !important}
51
Mike

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

button:focus {outline:0 !important;}

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

46
Scabbia

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

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

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

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

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

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

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

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

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

9
Aaron Noel De Leon

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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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

8
chuk

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

element:active:focus {
    outline: 0;
}

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

7
Forever Nomad

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

button:focus {
    box-shadow:none;
}
4
Rob Myrick

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

 enter image description here

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

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

результат:

 enter image description here

3
Behnam Mohammadi

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

*{
outline: none;
}

или же

*{
outline-style: none;
}
3
Santosh Khalse

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

2
Sandeep Sharma

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

input:focus {outline:0;}
2
aaayumi

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

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

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

.custom-button {
    outline: none
}
1
apurv thakur

Другой способ решить проблему доступности, которая здесь еще не упоминалась, - это немного 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);
0
Tobija Fischer

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

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

}

0
corsaro

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

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