Home / Questions / 282863
Accepted
qwerty
Asked: 2020-08-01 08:41:10 +0800 CST 2020-08-01 08:41:10 +0800 CST

Remove the outline of a button in Firefox

  • 772

I have a few buttons that when clicked a border appears around, I tried with outline and border but it does not remove:

.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>

enter image description here

css

1 Answers

  1. Best Answer

    The pseudo-element you are looking for is called:

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

    It should be noted that eliminating the outline is a bad practice in terms of user experience and accessibility, since it makes it difficult for users who navigate with the keyboard in the forms to use the pages. The outline is used to know which element is active. I suggest that if you are going to remove the outline, you at least put in another way to identify that the button is active . For example, you could change the state of the button so that when it receives focus ( :focus) it has a shadow around it, which is a more subtle way of integrating it into the interface.

    I copy both examples:

    .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>

    • 4