el botón de arranque muestra un contorno azul cuando se hace clic

Agregué esto, pero aún aparece el contorno azul cuando se hace clic en el botón.

.btn:focus {
  outline: none;
}

¿Cómo quitar esa cosa fea?

Puede ser que sus propiedades se anulen. Intente adjuntar !importanta su código junto con: active.

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

También agregue box-shadow porque de lo contrario aún verá el botón de sombra alrededor.

¡Aunque esta no es una buena práctica para usar! Important, te sugiero que uses una clase más específica y luego intentes aplicar el CSS con el uso de! Important ...

En la última versión de Bootstrap, descubrí que eliminar el esquema en sí no funciona. Y tengo que agregar esto porque también hay una sombra de cuadro:

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

Hay una clase boostrap incorporada shadow-nonepara deshabilitar box-shadow(no outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Esto elimina la sombra del botón:

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

Probar debajo del código

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

Esto me estaba sucediendo en Chrome (aunque no en Firefox). Descubrí que outlineBootstrap establece la propiedad como outline: 5px auto -webkit-focus-ring-color;. Se resolvió anulando la outlinepropiedad más adelante en mi CSS personalizado de la siguiente manera:

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

esto resolverá el botón con un texto, el botón solo un icono o un botón es un enlace:

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

si agregas border:none !important;

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

entonces el botón se reducirá al hacer clic.

Prueba esto

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

En Bootstrap 4 usan box-shadow: 0 0 0 0px rgba(0,123,255,0);: foco, si resolví mi problema con

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

Incluso después de eliminar el contorno del botón al establecer su valor en 0, todavía hay un comportamiento divertido en el botón cuando se hace clic, su tamaño se reduce un poco. Entonces se me ocurrió una solución óptima:

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

Espero que esto ayude...

Debe usar el anidamiento adecuado y luego aplicarle estilos.

• Haga clic con el botón derecho en el botón y encuentre la clase exacta que anida usando (Inspeccionar elemento usando firebug para firefox), (inspeccionar elemento para cromo).

• Agregue estilo a toda la clase. Solo entonces funcionaría

Encontré esto bastante útil en mi caso después de hacer clic en el botón.

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

Opté por eliminar simplemente el ancho del borde :focus. Esto elimina el espacio feo entre el contorno y las esquinas redondeadas del botón. Por alguna razón, este problema solo ocurre en elementos de botón reales y no en <a class="btn">elementos.

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

Esto puede ayudar si alguien todavía tiene esta pregunta sin 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>

Aquí está mi solución Boostrap 4 para eliminar el contorno del botón

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

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

Acabo de tener el mismo problema y el siguiente código funcionó para mí:

.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 ayude!

En realidad, en bootstrap se definen todas las variables para todos los casos. En su caso, solo tiene que anular la variable predeterminada '$ input-btn-focus-box-shadow' del archivo '_variables.scss'. Así: $input-btn-focus-box-shadow: none; tenga en cuenta que debe anular esa variable en su propio '_yourCusomVarsFile.scss' personalizado. Y ese archivo debe importarse en el proyecto en primer orden y luego bootstrap así:

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

Los bootstraps vars van con la bandera '! Default'.

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

Entonces, en su archivo, anulará los valores predeterminados. Aquí la ilustración:

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

La primera var tiene más prioridad que la segunda. Lo mismo es para los demás estados y casos. Espero que te ayude.

Aquí está el archivo '_variable.scss' del repositorio, donde puede encontrar todos los valores iniciales de bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

esto me funciona en BS3

Este me funcionó en Bootstrap 4:

.btn {border-color: transparent;}

Tratar

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

Tenga en cuenta que si su botón está dentro de un ancla como:

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

Agregar el estilo al botón en sí mismo puede no ser suficiente, es posible que deba agregar las a:focus, a:active { outline: none }reglas CSS cuando corresponda (esto funcionó para mí).

Prueba lo siguiente

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

A veces {outline: 0}no resolvió el problema y podemos intentar{box-shadow: none;}

Estoy usando bootstrap 4, puedes usar bocetos y recuadros.

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

O si el botón está dentro de un elemento como un div sin fondo, box-shadow es suficiente.

#buttonId {
     box-shadow: none;
}

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

Si está utilizando la versión 4.3 o superior, su código no funcionará correctamente. Esto es lo que usé. A mí me funcionó.

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

En lugar de apuntar a la clase de botón ( .btn ), aquí apunto al elemento del botón y funciona para mí.

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

Y puede usar la shadow-noneclase para el campo de entrada

Aquí hay un método que no es CSS. Usando JQuery, simplemente elimine la clase "focus" cada vez que se haga clic en el elemento.

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

Este método puede hacer que el borde aparezca y luego retroceder brevemente, lo que no se ve mal en mi opinión (parece que es parte de la respuesta cuando se hace clic en el botón).

La razón por la que usé .mousemove () es que .click () y .mouseup () resultaron ser ineficaces.

Cambiar estos valores funcionó para mí. Lo encontré mirando las Herramientas para desarrolladores de 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*/;
}

Esto también conserva la sombra del botón, solo cambia el color del botón al hacer clic.

Anule las instrucciones exactas de arranque:

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

Cambiar el color del borde a gris

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

La forma SCSS para todos los elementos (no solo los botones):

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