CODEWITHSUNDEEP
htmlcssgoogle-chrome
Vijay
Vijay

Reputation: 8451

how to remove outline of html button

I have button on my html page, when i click on that button it show me outer line to button shown as below image.

enter image description here

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;
}

Upvotes: 9

Views: 38087

Answers (8)

dinozaver
dinozaver

Reputation: 137

Could also be box-shadow. Try something like:

.resetButton{ box-shadow: none; }

or

resetButton:focus{ box-shadow: none; }

Upvotes: 0

ValentinEnnser
ValentinEnnser

Reputation: 1

Just add this to your CSS:

.resetButton:focus {
    outline: none;
}

Upvotes: 0

SanketS
SanketS

Reputation: 973

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;
}

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

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.

Upvotes: 14

Dominic Green
Dominic Green

Reputation: 10260

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

Upvotes: 1

Valerxx22
Valerxx22

Reputation: 814

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;
}

Upvotes: 4

spacebean
spacebean

Reputation: 1554

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;
}

Upvotes: 0

Michał Rybak
Michał Rybak

Reputation: 8706

Take a look on the outline CSS property.

To style a button that is being clicked, you can use :active pseudo-class.

Upvotes: 0

Related Questions