Todos os meus botões têm um destaque ao redor deles depois que eu clico neles. Isso está no Chrome.

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Estou usando o Bootstrap com um tema, mas tenho certeza de que não é isso: eu estava percebendo isso antes em outro projeto.

Ele desaparece se eu usar uma <a>tag em vez de <button>. Por quê? Se eu quisesse usar <button>como faria isso desaparecer?

Encontrei essas perguntas e respostas em outra página e substituir o estilo de foco do botão funcionou para mim. Esse problema pode ser específico ao MacOS com o Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Observe que isso tem implicações para a acessibilidade e não é recomendado até que você tenha um bom estado de foco consistente para seus botões e entradas. De acordo com os comentários abaixo, existem usuários por aí que não podem usar ratos.

Você quer algo como:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

O método .blur () remove corretamente o destaque do foco e não atrapalha os estilos do Bootstraps.

meu entendimento é que o foco é aplicado pela primeira vez após o onMouseDownevento, para chamar e.preventDefault()emonMouseDown pode ser uma solução limpa, dependendo de suas necessidades. Esta é certamente uma solução amigável à acessibilidade, mas obviamente ajusta o comportamento dos cliques do mouse que podem não ser compatíveis com o seu projeto na web.

Atualmente, estou usando esta solução (dentro de um react-bootstrapprojeto) e não recebo uma piscada de foco ou o foco retido dos botões após um clique, mas ainda posso tabular meu foco e visualizar visualmente o foco dos mesmos botões.

Não posso acreditar que ninguém postou isso ainda.

Use um rótulo em vez de um botão.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Violino

Embora seja fácil remover apenas o contorno de todos os botões focados (como na resposta do usuário1933897 ), mas essa solução é ruim do ponto de vista da acessibilidade (por exemplo, consulte Parar de mexer com o contorno do foco padrão do navegador )

Por outro lado, provavelmente é impossível convencer seu navegador a parar de estilizar seu botão clicado como focado se ele achar que está focado depois que você clicou nele (estou olhando para você, Chrome no OS X).

Então o que nós podemos fazer? Algumas opções vêm à minha mente.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Você está instruindo seu navegador a remover o foco em qualquer botão imediatamente após o clique. Ao usar em mouseupvez de clickmantermos o comportamento padrão para interações baseadas em teclado ( mouseupnão é acionado pelo teclado).

2) CSS: .btn:hover { outline: 0 !important }

Aqui você desativa o contorno apenas dos botões suspensos . Obviamente, não é o ideal, mas pode ser suficiente em algumas situações.

Isso funcionou para mim. Criei uma classe personalizada que substitui o CSS necessário.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

O -webkit-box-shadow funcionará nos navegadores Chrome e Safari.

Isso funciona para mim, outra solução não mencionada. Basta jogá-lo no evento click ...

$(this).trigger("blur");

Ou chame-o de outro evento / método ...

$(".btn_name").trigger("blur");

Se você usar a regra :focus { outline: none; }para remover contornos, o link ou controle poderá ser focado, mas sem indicação de foco para os usuários do teclado. Os métodos para removê-lo com JS onfocus="blur()"são ainda piores e resultam em usuários de teclado incapazes de interagir com o controle.

Os hacks que você pode usar, que estão bem , incluem adicionar :focus { outline: none; }regras quando os usuários interagem com o mouse e removê-los novamente se a interação do teclado for detectada. Lindsay Evans fez uma lib para isso: https://github.com/lindsayevans/outline.js

Mas eu preferiria definir uma classe na tag html ou body. E tenha controle no arquivo CSS de quando usar isso.

Por exemplo (os manipuladores de eventos em linha são apenas para fins de demonstração):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Coloquei uma caneta junto: http://codepen.io/snobojohan/pen/RWXXmp

Mas cuidado, existem problemas de desempenho. Isso força a repintura sempre que o usuário alterna entre o mouse e o teclado. Mais sobre como evitar tintas desnecessárias http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Percebi o mesmo e, mesmo que isso realmente me irrite, acredito que não há uma maneira adequada de lidar com isso.

Eu recomendaria contra todas as outras soluções fornecidas, porque elas eliminam completamente a acessibilidade do botão. Agora, quando você guia o botão, não obtém o foco esperado.

Isso deve ser evitado!

.btn:focus {
  outline: none;
}

Eu encontro uma solução. quando nos concentramos, o bootstrap usa box-shadow, então apenas o desabilitamos (reputação insuficiente, não é possível carregar a imagem :().

Eu adiciono

.btn:focus{
    box-shadow:none !important;
}

funciona.

OPÇÃO 1: Use o :focus-visible pseudo classe

A :focus-visiblepseudo-classe pode ser usada para eliminar os contornos desagradáveis ​​e focar os anéis nos botões e em vários elementos para os usuários que NÃO estão navegando pelo teclado (por exemplo, via toque ou clique do mouse).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Aviso: a partir de 2020, a :focus-visiblepseudo classe não é amplamente suportada nos navegadores . No entanto, o polyfill é muito fácil de usar; veja as instruções abaixo.

OPÇÃO 2: use o .focus-visiblepolyfill

Esta solução usa uma classe CSS normal em vez da pseudo-classe mencionada acima e possui amplo suporte ao navegador porque é um polyfill oficial baseado em Javascript .

Etapa 1: adicione as dependências Javascript à sua página HTML

Nota: o polyfill visível ao foco requer um polyfill adicional para vários navegadores mais antigos que não suportam classList :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Etapa 2: adicione o seguinte CSS à sua folha de estilo

A seguir está uma versão modificada da solução CSS documentada mais detalhadamente acima.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Etapa 3 (opcional): use a classe 'focus-visible' sempre que necessário

Se você possui algum item em que realmente deseja mostrar o anel de foco quando alguém clica ou usa o toque, basta adicionar a focus-visibleclasse ao elemento DOM.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Recurso:

• https://css-tricks.com/keyboard-only-focus-styles/

Demo:

• https://wicg.github.io/focus-visible/demo/

Se o acima não funcionar, tente o seguinte:

.btn: focus {estrutura de tópicos: nenhuma; caixa-sombra: nenhuma; borda: 2px sólido transparente;}

Como user1933897 apontou, isso pode ser específico para o MacOS com Chrome.

Tarde, mas quem sabe isso pode ajudar alguém. O CSS ficaria assim:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

O HTML seria semelhante a:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

Dessa forma, você pode manter o btn e seus comportamentos associados.

Mencionei isso em um comentário acima, mas vale a pena listar como uma resposta separada para maior clareza. Contanto que você não precise realmente se concentrar no botão, você pode usar o evento focus para removê-lo antes que ele possa aplicar efeitos CSS:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Isso evita a oscilação que pode ser vista ao usar o evento click. Isso restringe a interface e você não poderá tabular para o botão, mas isso não é um problema em todos os aplicativos.

Estilo

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

Usando

<button class="btn btn-primary not-focusable">My Button</button>

Experimente esta solução para remover a borda ao redor do botão. Adicione este código em css.

Experimentar

button:focus{
outline:0px;
}

Se não funcionar, use abaixo.

button:focus{
 outline:none !important;
 }

Para pessoas que desejam uma maneira css pura de fazer isso:

:focus:not(:focus-visible) { outline: none }

Isso também pode funcionar para link e assim por diante, além de bônus, mantém as acessibilidades do teclado. Por fim, é ignorado por navegadores que não suportam: foco visível

Estávamos com um problema semelhante e percebemos que o Bootstrap 3 não tem o problema em suas guias (no Chrome). Parece que eles estão usando o estilo de estrutura de tópicos, o que permite que o navegador decida o que é melhor fazer e o Chrome parece fazer o que você deseja: mostre a estrutura de tópicos quando focada, a menos que você tenha clicado no elemento.

outline-styleÉ difícil definir o suporte , pois o navegador decide o que isso significa. É melhor fazer check-in em alguns navegadores e ter uma regra de reserva.

Outra solução possível é adicionar uma classe usando um ouvinte Javascript quando o usuário clicar no botão e remover essa classe em foco com outro ouvinte. Isso mantém a acessibilidade (guias visíveis) e também impede o comportamento peculiar do Chrome de considerar um botão focado quando clicado.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Exemplo completo aqui: https://jsfiddle.net/4bbb37fh/

É trabalho, espero te ajudar

.btn:focus, .btn:focus:active {
    outline: none;
}

.btn:focus:active {
  outline: none;
}

isso remove o contorno ao clicar, mas mantém o foco ao tabular (para a11y)

Isso funciona melhor

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

este esquema: nenhum funcionará tanto para o botão quanto para uma tag

Adicione isso no CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Eu encontrei uma solução basta adicionar abaixo da linha no seu código css.

button:focus { outline: none }

Eu apenas tive esse mesmo problema no MacOS e no Chrome enquanto usava um botão para acionar um evento de "transição". Se alguém que estiver lendo isso já estiver usando um ouvinte de evento, poderá resolvê-lo chamando .blur()suas ações.

Exemplo:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Embora se você ainda não estiver usando um ouvinte de evento, a adição de um apenas para resolver isso pode adicionar sobrecarga desnecessária e uma solução de estilo, como as respostas anteriores fornecem, é melhor.

Você pode definir tabIndex="-1". Isso fará com que o navegador pule esse botão ao percorrer os controles de foco.

Outras "correções" sugeridas aqui, apenas removem o contorno do foco, mas ainda deixam os botões com tabulação. No entanto, do ponto de vista da usabilidade, você já removeu o brilho, para que o usuário não saiba de nenhuma maneira o que está focado no momento.

Por outro lado, tornar o botão não tabulável tem implicações de acessibilidade.

Estou usando-o para remover o contorno do foco do botão X bootstrap modal, que possui o botão "Fechar" na parte inferior de qualquer maneira, para que minha solução não tenha impacto na acessibilidade.

Se você estiver usando um navegador de webkit (e potencialmente um navegador compatível com a prefixação de fornecedor de webkit), esse esquema pertence à -webkit-focus-ringpseudoclasse do botão . Basta definir que é outlinea none:

*:-webkit-focus-ring {
  outline: none;
}

O Chrome é um navegador da Webkit e esse efeito também acontece no Linux (não apenas no macOS, embora alguns estilos do Chrome sejam apenas para macOS)

Eu estava tendo o mesmo problema usando o <a>botão atuando como e descobri que estava faltando uma solução alternativa ao adicionar attr para type="button"que ela se comportasse normalmente pelo menos para mim.

<a type="button" class="btn btn-primary">Release Me!</a>

diretamente na tag html (em um cenário em que você pode querer deixar o tema de auto-inicialização no lugar em outro lugar no seu design) ..

exemplos para tentar ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..ect ,. dependendo do efeito desejado.