Eliminar el borde azul del botón de estilo personalizado css en Chrome

Estoy trabajando en una página web y quiero etiquetas de estilo personalizado <button>. Así que con CSS, dije: border: none. Ahora funciona perfectamente en safari, pero en cromo, cuando hago clic en uno de los botones, pone un borde azul molesto a su alrededor. Pensé 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;
}

No se recomienda hacer esto, ya que hace retroceder la accesibilidad de su sitio; Para más información, vea esta publicación .

Dicho esto, si insiste, este CSS debería funcionar:

button:focus {outline:0;}

Compruébalo o JSFiddle: http://jsfiddle.net/u4pXu/

O en este fragmento:

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>

¡Espere! ¡Hay una razón para ese esquema feo!

Antes de eliminar ese feo contorno azul, es posible que desee tener en cuenta la accesibilidad . Por defecto, 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 la interacción con la computadora. Cuando elimina el contorno azul, ya no hay un indicador visual sobre qué elemento está enfocado. Si va a eliminar el contorno azul, debe reemplazarlo con otro tipo de indicación visual de que el botón está enfocado.

Posible solución: oscurecer los botones cuando está enfocado

Para los ejemplos a continuación, el contorno azul de Chrome se eliminó primero usando button:focus { outline:0 !important; }

Estos son los botones básicos de Bootstrap tal como aparecen normalmente:

Aquí están los botones cuando reciben 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 que los botones enfocados sean aún más oscuros para que haya una diferencia muy notable entre el estado enfocado y el estado normal del botón.

No es solo 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 usan los comandos del teclado para navegar a través de sitios web con el fin de mantener las manos en el teclado.

Simplemente elimino el esquema de todas las etiquetas de la página seleccionando todas y aplicando el esquema: ninguno a todo :)

*:focus {outline:none}

Como mencionó bagofcole, es posible que también deba agregar! Important, por lo que el estilo se verá así:

*:focus {outline:none !important}

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

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

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

button:focus {outline:0 !important;}

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

¡Eliminar outlinees terrible para la accesibilidad! Idealmente, el anillo de enfoque aparece solo cuando el usuario tiene la intención de usar el teclado .

Uso : foco-visible . Actualmente es una propuesta del W3C para diseñar el enfoque solo con teclado usando CSS, y es compatible con Firefox ( caniuse ). Hasta que otros navegadores principales lo admitan, puede usar este robusto polyfill .

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

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

También escribí una publicación más detallada en caso de que necesites más información.

Agregue esto en su archivo CSS.

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

Use esto:

:active {
    outline:none;
}

o esto si eso no funciona:

:active {
   outline:none !important;
}

Esto funciona para mí (FF y Chrome, al menos). En lugar de apuntar al :focusestado, solo apunte al :activeestado y eso eliminará el resaltado estéticamente molesto en su navegador cuando un usuario hace clic en un enlace. Pero aún conservará los estados de enfoque cuando un usuario con discapacidades pestañe o desplace las pestañas a través de una página. Ambas partes están felices. :)

para este problema:

utilizar este:

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

resultado:

Para cualquiera que use Bootstrap y tenga este problema, usará: active: focus y solo: active y: focus, por lo que necesitará:

element:active:focus {
    outline: 0;
}

Con suerte, ahorré a alguien algo de tiempo para resolverlo, me golpeé la cabeza por preguntarme por qué algo tan simple no estaba funcionando.

La mayoría de las soluciones no funcionarán si está utilizando Bootstrap 4.1 y posiblemente otras versiones. Después de muchos golpes en la cabeza, descubrí que necesitas aplicar la clase shadow-none :

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

Esto es lo que funcionó para mí:

button:focus {
    box-shadow:none;
}

La solución para Chrome y otros navegadores.

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

pruebe este código para todos los elementos que tienen un problema de borde azul

*{
outline: none;
}

o

*{
outline-style: none;
}

Otra forma de resolver el problema de accesibilidad que aún no se ha mencionado aquí es a través de un poco de Javascript . Los créditos van a esta publicación de blog perspicaz de hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

El enfoque aquí es realmente simple pero efectivo: agregar una clase cuando las personas comienzan a usar la tecla de tabulación para navegar por la página (y, opcionalmente, eliminarla cuando vuelva a cambiar al mouse. Luego puede usar esta clase para mostrar un esquema de enfoque o no) .

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

Me enfrenté al mismo problema, así que usé CSS simple

.custom-button {
    outline: none
}

Si desea eliminar el mismo efecto en la entrada, puede agregar el siguiente código y el botón.

input:focus {outline:0;}

Hasta que todos los navegadores modernos comiencen a admitir css-selector : focus-visible ,
la forma más simple y posiblemente la mejor para guardar la accesibilidad es eliminar este enfoque complicado solo para los usuarios del mouse y guardarlo para los usuarios del teclado :

1.Utilice este pequeño polyfill (aproximadamente 10kb): https://github.com/WICG/focus-visible
2.Agregue el siguiente código en algún lugar de su css:

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

Soporte de navegador de css4-selector: foco-visible ahora muy débil:
https://caniuse.com/#search=focus-visible

Simplemente escribe outline:none;. No es necesario usar el pseudo elementofocus

Este es un problema en la familia Chrome y ha estado allí para siempre.

Se ha generado un error https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Se puede mostrar aquí: https://codepen.io/anon/pen/Jedvwj tan pronto como agregue un borde a cualquier cosa como un botón (por ejemplo, se ha agregado role = "button" a una etiqueta) Chrome desordena y establece el estado de enfoque cuando hace clic con el mouse.

Recomiendo usar esta solución: https://github.com/wicg/focus-visible .

Solo haz lo siguiente

npm install --save focus-visible

Agregue el script a su html:

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

o importar a su archivo de entrada principal si usa webpack o algo similar:

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

luego pon esto en tu archivo 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;
}

Solo puedes configurar:

button:focus {outline:0;}

pero si tiene una gran cantidad de usuarios, está en desventaja para aquellos que no pueden usar ratones o para aquellos que solo quieren usar su teclado para mayor velocidad.

Tuve el mismo problema con bootstrap. Resolví con contorno y cuadro de sombra

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