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;
}
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.
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;
}
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..?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With