4

Tengo unos cuantos botones que al dar clic aparece un borde alrededor, intente con outline y border pero no se elimina:

.btn-calc {
	margin: 4px;
	width: 45px;
	height: 45px;
	border: none;
	text-decoration: none;
	cursor: pointer;
	border-radius: 5px;
	text-transform: capitalize;
	font-size: .9em;
	background: transparent;
	color: #939393;
	outline: none !important;
}
<button class="btn-calc math" id="AC">c</button>

introducir la descripción de la imagen aquí

3
  • En tu código no se ve el borde que muestras en la imagen. Commented el 31 jul. 2019 a las 16:51
  • @JheymanMejia Olvidé mencionar que uso Firefox, ¿qué navegador usas?
    – qwerty
    Commented el 31 jul. 2019 a las 16:54
  • Amigo use tu codigo y no me sale como tu dices, ni en chrome ni en firefox, podras poner mas para tratar de ayudarte Commented el 31 jul. 2019 a las 17:04

1 respuesta 1

4

El pseudo-elemento que buscás se llama:

.btn-calc::-moz-focus-inner {
    border: none;
}

Cabe aclarar que eliminar el outline es una mala práctica en cuanto a experiencia de usuario y accesibilidad, ya que dificulta el uso de las páginas a usuarios que navegan con el teclado en las formas. El outline sirve para saber cuál es el elemento que está activo. Te sugiero que si vas a eliminar el outline, al menos coloqués otra forma de identificar que el botón está activo. Por ejemplo, podrías cambiar el estado del botón para que al recibir el foco (:focus) tenga una sombra alrededor, que es una forma más sutil de integrarlo a la interfaz.

Te copio ambos ejemplos:

.btn-calc {
	margin: 4px;
	width: 45px;
	height: 45px;
	border: none;
	text-decoration: none;
	cursor: pointer;
	border-radius: 5px;
	text-transform: capitalize;
	font-size: .9em;
	background: transparent;
	color: #939393;
	outline: none !important;
}

.btn-calc.sombra:focus {
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}

.btn-calc::-moz-focus-inner {
  border: none;
}
<h3>Ejemplo sin outline:</h3>
<button class="btn-calc math" id="AC">c</button>
<h3>Ejemplo con sombra al recibir el foco:</h3>
<button class="btn-calc math sombra" id="AC">c</button>

1
  • 2
    El pseudo-elemento :-moz-focus-inner es una implementación exclusiva para firefox, que debés incluir en adición al CSS del selector de estado :focus para eliminar el borde de todos los navegadores.
    – Niche
    Commented el 31 jul. 2019 a las 18:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.