Remove border after clicking button

Envato Authors Theme Authors
1

How do I remove this button that appears when and after you click buttons with Firefox?

2

Set outline:none for the active state

3

It’s best to use a reset CSS, and most remove that.

4

I usually apply this code to all of my CSS:

* {
	outline: none;
}
1 Like
5
I usually apply this code to all of my CSS: 
* {
	outline: none;
}

Bad accessibility :slight_smile:

1 Like
6 
a:active,
a:focus { 
    -moz-outline-style: none; 
}
7

There’s two ways to add buttons on my template; with input and with anchor elements. I’ve removed the border for the anchor elements, but it won’t go away for the input elements…

Here’s my code for the input buttons:

input.hugeBtn[type="submit"],
input.bigBtn[type="submit"],
input.mediumBtn[type="submit"],
input.smallBtn[type="submit"],
input.smallerBtn[type="submit"] {
	border:0;
	display:block;
	cursor:pointer;
	font-family:"Trebuchet MS", Helvetica, Arial, sans-serif;
	color:#090909;
}
input.bigBtn {
	background:url(../images/misc/buttons/buttonBigBlue.png) no-repeat 0 0;
	height:51px;
	width:174px;
	font-size:24px;
	line-height:24px;
	font-weight:normal;
}
input.bigBtn[type="submit"]:hover {
	background-position:0 center;
}
input.bigBtn[type="submit"]:active {
	background-position:0 bottom;
}

And this is the CSS that I tried:

input.bigBtn[type="submit"]:active,
input.bigBtn[type="submit"]:focus {
	-moz-outline-style: none;
	outline:none;
	outline:0;
}

And all kinds of desperate attempts in the reset:

*:focus,
*:active,
a:active,
a:focus,
input:focus,
input:active { 
    -moz-outline-style: none;
	outline:none;
	outline: 0;
}
8
I usually apply this code to all of my CSS: 
* {
	outline: none;
}

This is the fastest solution. But it is said using wildcards slows down your css with some milliseconds :slight_smile:

9

One of the best way to do it:

:-moz-any-link:focus {
  outline: none;
}

http://sonspring.com/journal/removing-dotted-links