botão de auto-inicialização mostra contorno azul quando clicado

Eu adicionei isso, mas ainda assim o contorno azul aparece quando o botão é clicado.

.btn:focus {
  outline: none;
}

como remover essa coisa feia?

Pode ser que suas propriedades estejam sendo substituídas. Tente anexar !importantao seu código junto com: active.

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

Adicione também box-shadow, caso contrário você ainda verá a sombra ao redor do botão.

Embora essa não seja uma boa prática para usar! Important, sugiro que você use uma classe mais específica e tente aplicar o css com o uso de! Important ...

Na versão mais recente do Bootstrap, descobri que remover o próprio contorno não funciona. E eu tenho que adicionar isso porque há também uma sombra de caixa:

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

Há uma classe boostrap integrada shadow-nonepara desativar box-shadow(não outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Isso remove a sombra do botão:

<button class='btn btn-primary shadow-none'>Example button</button>

Tente abaixo do código

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

Isso estava acontecendo comigo no Chrome (embora não no Firefox). Eu descobri que a outlinepropriedade estava sendo definida pelo Bootstrap como outline: 5px auto -webkit-focus-ring-color;. Resolvido substituindo a outlinepropriedade posteriormente no meu CSS personalizado, da seguinte maneira:

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

isso resolverá o botão com um texto, apenas um ícone ou um botão é um link:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

se você adicionar border:none !important;

{
    border:none !important;
    outline:none !important;
}

então o botão se tornará menor quando clicado.

Tente isto

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

No Bootstrap 4, eles usam box-shadow: 0 0 0 0px rgba(0,123,255,0);: foco, e eu resolvi meu problema com

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

Mesmo depois de remover o contorno do botão, definindo seu valor como 0, ainda há um comportamento engraçado no botão quando clicado, seu tamanho diminui um pouco. Então, eu vim com uma solução ótima:

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

Espero que isto ajude...

Você precisa usar o aninhamento adequado e depois aplicar estilos a ele.

• Clique com o botão direito do mouse no botão e encontre a classe exata aninhada usando (Inspecione elemento usando firebug para firefox), (Inspecione elemento para chrome).

• Adicione estilo ao grupo inteiro da classe. Só então funcionaria

Achei isso bastante útil no meu caso após o clique no botão.

$('#buttonId').blur();

Optei por simplesmente remover a largura da borda :focus. Isso remove o espaço feio entre o contorno e os cantos arredondados do botão. Por algum motivo, esse problema ocorre apenas em elementos de botão reais e não em <a class="btn">elementos.

button.btn:focus {
  border-width: 0;
}

Isso pode ajudar se alguém ainda tiver essa pergunta por resolver.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

Aqui está a minha solução Boostrap 4 para remover o contorno do botão

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

Acabei de ter o mesmo problema e o seguinte código funcionou para mim:

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

Esperando que isso ajude!

Na verdade, no bootstrap são definidas todas as variáveis ​​para todos os casos. No seu caso, basta substituir a variável padrão '$ input-btn-focus-box-shadow' do arquivo '_variables.scss'. Da mesma forma: $input-btn-focus-box-shadow: none; Observe que você precisa substituir essa variável em seu próprio '_yourCusomVarsFile.scss' personalizado. E esse arquivo deve ser importado no projeto em primeira ordem e depois inicializado da seguinte maneira:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

Os vars de bootstraps são exibidos com o sinalizador '! Default'.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Portanto, no seu arquivo, você substituirá os valores padrão. Aqui está a ilustração:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

O primeiro var tem mais prioridade que o segundo. O mesmo é para os demais estados e casos. Espero que ajude você.

Aqui está o arquivo '_variable.scss' do repositório, onde você pode encontrar todos os valores de iniciais do bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

isso funciona para mim no BS3

Este funcionou para mim no Bootstrap 4:

.btn {border-color: transparent;}

Experimentar

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

Lembre-se de que se o botão estiver dentro de uma âncora, como:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

Adicionar o estilo ao botão em si pode não ser suficiente; talvez seja necessário adicionar as a:focus, a:active { outline: none }regras CSS onde apropriado (isso funcionou para mim).

Experimente o abaixo

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

Às vezes {outline: 0}não resolvemos o problema e podemos tentar{box-shadow: none;}

Estou usando o bootstrap 4, você pode usar o contorno e a sombra da caixa.

#buttonId {
    box-shadow: none;
    outline: none;
}

Ou, se o botão estiver dentro de um elemento como uma div sem fundo, a sombra da caixa é suficiente.

#buttonId {
     box-shadow: none;
}

Exemplo: https://codepen.io/techednelson/pen/XRwgRB

Se você estiver usando a versão 4.3 ou superior, seu código não funcionará corretamente. Isto é o que eu usei. Funcionou para mim.

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

Em vez de segmentar na classe de botão ( .btn ), aqui eu viso o próprio elemento button e funciona para mim.

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

E pode usar a shadow-noneclasse para o campo de entrada

Aqui está um método não CSS. Usando o JQuery, basta remover a classe "focus" sempre que o elemento for clicado.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

Esse método pode fazer com que a borda pisque e volte a funcionar brevemente, o que não parece ruim na minha opinião (parece parte da resposta quando o botão é clicado).

A razão pela qual eu usei .mousemove () é que .click () e .mouseup () provaram ser ineficazes.

Mudar esses valores funcionou para mim. Encontrei-o olhando para as Ferramentas do desenvolvedor do Chrome

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

Isso mantém a sombra do botão também, apenas altera a cor do botão ao clicar.

Substitua as instruções exatas de autoinicialização:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

Mude a cor da borda de volta para cinza

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

A maneira SCSS para todos os elementos (não apenas botões):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}