estilo - quitar focus css

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

Question

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

Answer 1

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

Uso :focus-visible . Actualmente, es una propuesta del W3C para estilizar solo con el teclado usando CSS. Hasta que los principales navegadores lo admitan, puede utilizar 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 post más detallada en caso de que necesites más información.

Answer 2

Acabo de eliminar el esquema de todas las etiquetas en la página seleccionando todos y aplicando el esquema: ninguno a todo :)

*:focus {outline:none}

Como mencionó bagofcole, es posible que también deba agregar! Important, para que el estilo se vea así:

*:focus {outline:none !important}

Answer 3

Agregue esto en su archivo CSS.

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

Answer 4

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

button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}

Answer 5

Este es un problema en la familia Chrome y ha estado ahí por siempre.

Se ha producido 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 algo parecido a un botón (por ejemplo, role = "button" se agregó a una etiqueta) Chrome desordena y establece el estado de enfoque al hacer clic con el mouse.

Recomiendo encarecidamente utilizar esta solución: polyfill .

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 importe en su archivo de entrada principal si usa un paquete web o algo similar:

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

Luego ponga esto en su 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; }

Usted puede simplemente establecer:

button:focus {outline:0;}

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

Answer 6

Esto es lo que funcionó para mí:

button:focus {
    box-shadow:none;
}

Answer 7

Hasta que todos los navegadores modernos inicien la compatibilidad con css-selector : focus-visible ,
La forma más sencilla y posiblemente mejor de guardar la accesibilidad es eliminar este enfoque delicado 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 del navegador de css4-selector: focus-visible en este momento muy débil:
https://caniuse.com/#search=focus-visible

Answer 8

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

*{
outline: none;
}

o

*{
outline-style: none;
}

Answer 9

No olvides la !important Declaración !important , 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.

Answer 10

Para cualquier persona que use Bootstrap y tenga este problema, ellos usan: active: focus así como solo: active y: focus por lo que necesitará:

element:active:focus {
    outline: 0;
}

Con suerte, le ahorré a alguien un poco de tiempo pensando en eso, me golpeé la cabeza por preguntarme por qué una cosa tan simple no estaba funcionando.

Answer 11

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

input:focus {outline:0;}

Answer 12

Simplemente escriba el outline:none; . No hay necesidad de usar pseudo elemento de focus

Answer 13

Solo agrega esto a tu css:

button:focus {outline:0;}

Compruébelo 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>

Answer 14

Usa cualquiera de 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 :focus estado de :focus , solo apunte al :active estado :active y eso eliminará el resaltado estéticamente intrusivo en su navegador cuando un usuario haga clic en un enlace. Pero aún conservará los estados de enfoque cuando un usuario con discapacidades o las pestañas de desplazamiento a través de una página. Ambas partes son felices. :)

Answer 15

para este problema:

utilizar esta:

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

resultado:

Answer 16

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

Antes de quitar ese contorno azul feo, es posible que desee tener en cuenta la accesibilidad . Por defecto, ese contorno azul se coloca en elementos enfocados. Esto es así para que los usuarios con problemas de accesibilidad puedan enfocar ese botón haciendo clic en él. 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 quita 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 se enfoca

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

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

Aquí están los botones cuando reciben el foco:

Aquí los botones cuando se pulsan:

Como puede ver, los botones son un poco más oscuros cuando reciben el enfoque. 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 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 por los sitios web con el fin de mantener las manos en el teclado.