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




убрать тень у кнопки css (11)

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

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

button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}

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

element:active:focus {
    outline: 0;
}

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


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

input:focus {outline:0;}

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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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


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

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

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

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


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


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

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

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

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

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


Это проблема в семействе Chrome и была там навсегда.

Была поднята ошибка https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Это можно показать здесь: https://codepen.io/anon/pen/Jedvwj, как только вы добавляете границу к чему-нибудь по кнопке (например, например, в теге добавлена ​​кнопка role = "button). Chrome испортился и устанавливает состояние фокусировки, когда вы нажимаете мышью.

Я настоятельно рекомендую использовать это исправление: polyfill .

Просто выполните следующее

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

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


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

*:focus {outline:none}

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

*:focus {outline:none !important}

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

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

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

результат:


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

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

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

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

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

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

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

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

Это не только для пользователей с ограниченными возможностями

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







google-chrome