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


Estoy trabajando en una página web, y quiero un estilo personalizado <button> etiquetas. Entonces con CSS, dije: border: none. Ahora funciona perfectamente en Safari, pero en Chrome, 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 ninguno lo hace. ¿Algunas ideas?

Esto es lo que parece antes de hacer clic (y cómo quiero que se vea aún después de hacer clic):

Y este es el límite del que estoy hablando:

enter image description here

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

512
2017-12-02 23:45


origen


Respuestas:


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>


1041
2018-02-13 15:15



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

Antes de quitar ese contorno azul feo, es posible que desee tomar accesibilidad en consideración. 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 tabulá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 de la computadora. Cuando elimina el contorno azul, ya no hay un indicador visual de qué elemento está enfocado. Si va a eliminar el contorno azul, debería reemplácelo con otro tipo de indicación visual de que el botón está enfocado.

Possible Solution: Darken Buttons when focused

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

Aquí están los botones básicos de Bootstrap como aparecen normalmente: Bootstrap Buttons in Normal State

Aquí están los botones cuando reciben foco: Bootstrap Buttons in Focused State

Aquí los botones cuando se presionan: enter image description here

Como puede ver, los botones son un poco más oscuros cuando reciben el foco. Personalmente, recomendaría hacer los botones enfocados 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 con discapacidades

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 comandos de teclado para navegar a través de sitios web con el fin de mantener las manos sobre el teclado.


215
2017-08-14 00:00



No olvides !important declaración, para un mejor resultado

button:focus {outline:0 !important;}

Una regla que tenga la propiedad! Importante siempre se aplicará independientemente de dónde aparezca esa regla en el documento CSS.


43
2018-05-28 16:50



Solo elimino el esquema de todas las etiquetas en la página seleccionando todo y aplicando el contorno: none a todo :)

*:focus {outline:none}

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

*:focus {outline:none !important}

43
2018-01-06 14:49



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

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

23
2018-06-09 14:50



Agregue esto en su archivo CSS.

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

10
2017-07-22 06:35



Usa 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, solo apunte al :active estado y que 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 pestañas de discapacidades o pestañas de desplazamiento atraviesa una página. Ambas partes están felices. :)


8
2017-11-11 21:45



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

element:active:focus {
    outline: 0;
}

Con un poco de suerte le ahorré a alguien un tiempo pensando en eso, me golpeé la cabeza preguntándome por qué algo tan simple no funcionaba.


7
2017-08-25 09:35



Esto es lo que funcionó para mí:

button:focus {
    box-shadow:none;
}

4
2018-02-09 21:02



prueba este código para todos los elementos que tengan un problema de borde azul

*{
outline: none;
}

o

*{
outline-style: none;
}

3
2017-12-16 10:17