Remover borda azul do botão CSS personalizado no Chrome

Estou trabalhando em uma página da web e quero <button>tags com estilo personalizado . Então, com CSS, eu disse:border: none . Agora ele funciona perfeitamente no safari, mas no chrome, quando clico em um dos botões, coloca uma borda azul irritante em torno dele. Eu pensei button:active { outline: none }ou button:focus { outline:none }iria funcionar, mas também não. Alguma ideia?

É assim que é antes de ser clicado (e como eu quero que ainda pareça depois de ser clicado):

E é dessa fronteira que estou falando:

Aqui está o meu 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;
}

Isso não é recomendado , pois regride a acessibilidade do seu site; para mais informações, consulte esta postagem .

Dito isto, se você insiste, este CSS deve funcionar:

button:focus {outline:0;}

Confira ou JSFiddle: http://jsfiddle.net/u4pXu/

Ou neste snippet:

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>

Esperar! Há uma razão para esse esboço feio!

Antes de remover esse feio contorno azul, convém levar em consideração a acessibilidade . Por padrão, esse contorno azul é colocado em elementos que podem ser focalizados. Isso é para que os usuários com problemas de acessibilidade possam focar esse botão, tabulando-o. Alguns usuários não possuem as habilidades motoras para usar o mouse e devem usar apenas o teclado (ou algum outro dispositivo de entrada) para interação com o computador. Quando você remove o contorno azul, não há mais um indicador visual sobre qual elemento está focado. Se você estiver indo para remover o contorno azul, você deve substituí-lo por um outro tipo de indicação visual de que o botão é focado.

Solução possível: Escurecer botões quando focado

Para os exemplos abaixo, o contorno azul do Chrome foi removido primeiro usando button:focus { outline:0 !important; }

Aqui estão os botões básicos do Bootstrap, como eles aparecem normalmente:

Aqui estão os botões quando eles recebem o foco:

Aqui os botões quando são pressionados:

Como você pode ver, os botões ficam um pouco mais escuros quando recebem o foco. Pessoalmente, eu recomendaria tornar os botões focados ainda mais escuros para que haja uma diferença muito perceptível entre o estado focado e o estado normal do botão.

Não é apenas para usuários com deficiência

Tornar seu site mais acessível é algo que geralmente é esquecido, mas pode ajudar a criar uma experiência mais produtiva em seu site. Existem muitos usuários normais que usam comandos do teclado para navegar pelos sites, a fim de manter as mãos no teclado.

Acabei de remover o contorno de todas as tags da página selecionando tudo e aplicando o contorno: nenhum para tudo :)

*:focus {outline:none}

Como o bagofcole mencionou, você pode precisar adicionar também! Important, assim o estilo ficará assim:

*:focus {outline:none !important}

Na minha instância deste problema, tive que especificar box-shadow: none

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

Não se esqueça da !importantdeclaração, para um melhor resultado

button:focus {outline:0 !important;}

Uma regra que possua a propriedade! Important sempre será aplicada, independentemente de onde ela apareça no documento CSS.

A remoção outlineé terrível para a acessibilidade! Idealmente, o anel de foco aparece apenas quando o usuário pretende usar o teclado .

Uso : foco visível . Atualmente, é uma proposta do W3C para estilizar o foco somente do teclado usando CSS e é suportada no Firefox ( caniuse ). Até que outros navegadores principais o suportem, você pode usar esse polyfill robusto .

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

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

Também escrevi um post mais detalhado, caso você precise de mais informações.

Adicione isso ao seu arquivo CSS.

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

Use isto:

:active {
    outline:none;
}

ou isso se isso não funcionar:

:active {
   outline:none !important;
}

Isso funciona para mim (FF e Chrome, pelo menos). Em vez de segmentar o :focusestado, basta segmentar o :activeestado e isso removerá o realce esteticamente invasivo do seu navegador quando um usuário clicar em um link. Mas ainda manterá os estados de foco quando um usuário com deficiência guia ou alterna entre guias de uma página. Ambas as partes são felizes. :)

para este problema:

usa isto:

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

resultado:

Para quem usa o Bootstrap e tem esse problema, ele usa: active: focus e apenas: active e: focus, para que você precise de:

element:active:focus {
    outline: 0;
}

Espero que alguém tenha economizado algum tempo para descobrir isso, bateu minha cabeça um pouco imaginando por que uma coisa tão simples não estava funcionando.

A maioria das soluções não funcionará se você estiver usando o Bootstrap 4.1 e possivelmente outras versões. Depois de muita batida, descobri que você precisa aplicar a classe shadow-none :

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

Isto é o que funcionou para mim:

button:focus {
    box-shadow:none;
}

A correção para o Chrome e outros navegadores

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

tente este código para todos os elementos com problemas de borda azul

*{
outline: none;
}

ou

*{
outline-style: none;
}

Outra maneira de resolver o problema de acessibilidade que ainda não foi mencionado aqui é através de um pouco de Javascript . Os créditos vão para este blogpost interessante do hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

A abordagem aqui é realmente simples, mas eficaz: adicionar uma classe quando as pessoas começarem a usar a tecla tab para navegar na página (e, opcionalmente, removê-la quando mudar novamente para o mouse. Em seguida, você pode usar essa classe para exibir um esboço do foco ou não .

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

Como enfrentei o mesmo problema, usei CSS-

.custom-button {
    outline: none
}

Se você deseja excluir o mesmo efeito na entrada, você pode adicionar o seguinte código e o botão.

input:focus {outline:0;}

Até que todos os navegadores modernos comecem a suportar o seletor de css : focus-visible ,
a maneira mais simples e possivelmente melhor de economizar acessibilidade é remover esse foco complicado apenas para usuários de mouse e salvá-lo para usuários de teclado :

1.Use este pequeno polyfill (cerca de 10kb): https://github.com/WICG/focus-visible
2.Adicione o próximo código em algum lugar no seu css:

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

Suporte para navegador do css4-selector: foco visível agora muito fraco:
https://caniuse.com/#search=focus-visible

Basta escrever outline:none;. Não há necessidade de usar pseudo elementofocus

Esse é um problema da família Chrome e está presente desde sempre.

Um erro foi gerado https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Pode ser mostrado aqui: https://codepen.io/anon/pen/Jedvwj assim que você adicionar uma borda a qualquer botão (por exemplo, role = "button" foi adicionado a uma tag, por exemplo). e define o estado do foco quando você clica com o mouse.

Eu recomendo usar esta correção: https://github.com/wicg/focus-visible .

Basta fazer o seguinte

npm install --save focus-visible

Adicione o script ao seu html:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

ou importe para o seu arquivo de entrada principal se estiver usando o webpack ou algo semelhante:

import 'focus-visible/dist/focus-visible.min';

então coloque isso no seu arquivo 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;
}

Você pode apenas definir:

button:focus {outline:0;}

mas se você tiver um grande número de usuários, estará prejudicando aqueles que não podem usar ratos ou aqueles que apenas desejam usar o teclado para obter velocidade.

Eu tive o mesmo problema com o bootstrap. Eu resolvi com contorno e sombra de caixa

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