512 votos

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

Estoy trabajando en una página web, y quiero un estilo personalizado <button> tags. Así que con el CSS, dije: border: none . Ahora funciona perfectamente en safari, pero en chrome, cuando hago clic en uno de los botones, pone un molesto borde azul alrededor. He pensado que button:active { outline: none } o button:focus { outline:none } funcionaría, pero ninguno de los dos lo hace. ¿Alguna idea?

Este es el aspecto que tiene antes de ser pulsado (y cómo quiero que siga siendo después de ser pulsado):



Y esta es la frontera de la que hablo:

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

1041voto

Ronen Puntos 885

Sólo tienes que añadir esto a tu css:

button:focus {outline:0;}

Compruébelo aquí: http://jsfiddle.net/u4pXu/

215voto

Nathan Puntos 398

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

Antes de eliminar ese feo contorno azul, es posible que quieras tomar accesibilidad en consideración. Por defecto, ese contorno azul se coloca en los elementos enfocables. Esto se hace para que los usuarios con problemas de accesibilidad puedan enfocar ese botón al desplazarse hasta él. Algunos usuarios no tienen la capacidad motriz de utilizar un ratón y deben usar sólo el teclado (o algún otro dispositivo de entrada) para interactuar con el ordenador. Cuando se elimina el contorno azul, ya no hay un indicador visual sobre qué elemento está enfocado. Si va a eliminar el contorno azul, debe debe sustituirlo por otro tipo de indicación visual de que el botón está enfocado.

43voto

Scabbia Puntos 181

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

button:focus {outline:0 !important;}

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

8voto

chuk Puntos 1

Usa esto:

:active {
    outline:none;
}

o esto si no funciona:

:active {
   outline:none !important;
}

A mí me funciona (FF y Chrome, al menos). En lugar de apuntar al :focus estado, sólo apuntar a la :active y eso eliminará el resaltado estéticamente molesto en su navegador cuando un usuario haga clic en un enlace. Pero seguirá reteniendo los estados de enfoque cuando un usuario con discapacidades haga tabs o shift-tabs a través de una página. Ambas partes están contentas :)

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X