how to remove outline of html button - html

Question

I have button on my html page, when i click on that button it show me outer line to button shown as below image.
here when i click on reset button it show me outer as above image.
Html code:
< input type="reset" value="" class="resetButton" />
css code:
.resetButton
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
border: none;
width: 90px;
height: 32px;
cursor: pointer;
}

Answer 1

Use this:
input[type="reset"]:focus{
outline: none;
}
or just
input:focus{
outline: none;
}
if you don't want that outline to all the input types.

Answer 2

Just add display: block;
.resetButton
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
display: block;
border: none;
width: 90px;
height: 32px;
cursor: pointer;
}

Answer 3

This is normally a chrome issue, the main thing to note here is that it is an outline not a border.
Try
.resetButton{ outline: none; }
For more info check out http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines
Also check out this post on the dangers of removing the border completely
Google Chrome > Textboxes > Yellow border when active..?

Answer 4

Take a look on the outline CSS property.
To style a button that is being clicked, you can use :active pseudo-class.

Answer 5

Add an outline: none to your css:
.resetButton
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
border: none;
width: 90px;
height: 32px;
cursor: pointer;
outline: none;
}

Answer 6

Try this.
.resetButton, .resetButton:visited
{
margin: 0px;
background:url(../images/button/Reset2.png) no-repeat;
display: block;
width: 90px;
height: 32px;
cursor: pointer;
border: none;
outline: none;
}

Answer 7

Just add this to your CSS:
.resetButton:focus {
outline: none;
}

Answer 8

Could also be box-shadow. Try something like:
.resetButton{ box-shadow: none; }
or
resetButton:focus{ box-shadow: none; }