Видаліть синю облямівку із кнопки CSS, призначеної для користувача в Chrome

Я працюю над веб-сторінкою і хочу <button>теги на замовлення. Так що з допомогою CSS, я сказав: border: none. Зараз він прекрасно працює в сафарі, але в хромі, коли я натискаю одну з кнопок, вона наносить дратує синю облямівку навколо нього. Я думав, 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 ( каніуса ). Поки інші основні веб-переглядачі не підтримують його, ви можете використовувати цю надійну поліфункцію .

/* 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: фокус, а також просто: 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-селектор : видимий фокус ,
найпростіший та, можливо, найкращий спосіб зберегти доступність - це видалити цей хитрий фокус лише для користувачів миші та зберегти його для користувачів клавіатури :

1. Використовуйте цей крихітний поліфайл (близько 10 кбіт): https://github.com/WICG/focus-visible
2.Додайте наступний код десь у своєму css:

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

Підтримка браузера css4-selector: фокус-видимий зараз дуже слабкий:
https://caniuse.com/#search=focus-visible

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

Це проблема в сім'ї Chrome, і вона існувала назавжди.

Помилка піднята https://bugs.chromium.org/p/chromium/isissue/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>

або імпортуйте у ваш основний вхідний файл, якщо використовуєте веб-пакет чи щось подібне:

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;}

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

У мене була така ж проблема з завантажувальним пристроєм. Я вирішив як контур, так і коробку-тінь

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