Eliminar el borde azul del botón CSS con estilo personalizado en Chrome

Estoy trabajando en una página web y quiero <button>etiquetas con estilos personalizados. Entonces con CSS, dije: border: none. Ahora funciona perfectamente en Safari, pero en Chrome, cuando hago clic en uno de los botones, aparece un molesto borde azul alrededor. Pensé que funcionaría button:active { outline: none }o button:focus { outline:none }funcionaría, pero tampoco lo hago. ¿Algunas ideas?

Así es como se ve antes de hacer clic (y cómo quiero que se vea después de hacer clic):

Y esta es la frontera de la que estoy hablando:

Aquí está mi 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;
}

Dec 03 '13 06:12 eshellborn

¡Esperar! ¡Hay una razón para ese feo contorno!

Antes de eliminar ese feo contorno azul, es posible que desees tener en cuenta la accesibilidad . De forma predeterminada, ese contorno azul se coloca en elementos enfocables. Esto es para que los usuarios con problemas de accesibilidad puedan enfocar ese botón presionándolo. Algunos usuarios no tienen las habilidades motoras para usar un mouse y deben usar solo el teclado (o algún otro dispositivo de entrada) para interactuar con la computadora. Cuando eliminas el contorno azul, ya no hay un indicador visual sobre qué elemento está enfocado. Si vas a eliminar el contorno azul, deberás reemplazarlo con otro tipo de indicación visual de que el botón está enfocado.

Posible solución: oscurecer los botones cuando estén enfocados

Para los ejemplos siguientes, el contorno azul de Chrome se eliminó primero usandobutton:focus { outline:0 !important; }

Aquí están los botones básicos de Bootstrap tal como aparecen normalmente:

Estos son los botones cuando reciben el foco:

Aquí los botones cuando se presionan:

Como puede ver, los botones son un poco más oscuros cuando reciben el foco. Personalmente, recomendaría oscurecer aún más los botones enfocados para que haya una diferencia muy notable entre el estado enfocado y el estado normal del botón.

No es sólo para usuarios discapacitados

Hacer que su sitio sea más accesible es algo que a menudo se pasa por alto, pero puede ayudar a crear una experiencia más productiva en su sitio web. Hay muchos usuarios normales que utilizan comandos de teclado para navegar por sitios web y mantener las manos en el teclado.

Aug 14 '2014 00:08 Nathan

En mi caso de este problema tuve que especificarbox-shadow: none

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

Jun 09 '2016 14:06 antonkronaj

No olvides la !importantdeclaración, para un mejor resultado.

button:focus {outline:0 !important;}

Una regla que tenga la propiedad importante siempre se aplicará sin importar dónde aparezca esa regla en el documento CSS.

May 28 '2014 16:05 Scabbia

¡ Quitarlo outlinees terrible para la accesibilidad! Lo ideal es que el anillo de enfoque aparezca sólo cuando el usuario pretende utilizar el teclado .

Usar :focus-visible. Es compatible con todos los principales navegadores ( caniuse ).

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

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

May 28 '2018 17:05 Aaron Noel De Leon