Unwanted outline or border around button when clicked
Solution 1
If you are talking about the dotted line in Firefox, I think what you're looking for is this:
button::-moz-focus-inner { border: 0; }
This is a thread on the topic: How to remove Firefox's dotted outline on BUTTONS as well as links?
Solution 2
Use either of these CSS Styles
a:active,
a:focus,
input,
input:active,
input:focus {
outline: 0;
outline-style:none;
outline-width:0;
}
a:active,
a:focus,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
Solution 3
outline: none;
This worked for me in Chrome.
Solution 4
Please don't remove the outlines on focus-styles, this makes your site less accessible to your keyboard-only and low-vision users.
If you choose to add something like :focus { outline: none; }
to your stylesheets, also add you owns styles for focused elements.
Reading: Never remove CSS outlines
Solution 5
It's an outline.
Use outline:none;
on :focus pseudo-class to remove it.
Worked well for me.
Related videos on Youtube
Web_Designer
Warning: Stack overflow was a deep pit for me. I wanted to be esteemed by others. But what is highly esteemed by others is detestable in the sight of God. Jesus said, "What would it profit you to gain the whole world and forfeit your soul?" God is patient, but He never fails to fulfill His word. Judgement will come where everyone will be repaid for their deeds. Read the Bible and give up everything to obey Jesus.
Updated on July 09, 2022Comments
-
Web_Designer almost 2 years
I have a styled button on my website. But when I click it, it creates an unwanted border or outline (I don't know which). How can I remove that border? Below is all the code that pertains to the button.
button { border: hidden; cursor: pointer; outline: none; }
<button>this is my button</button>
-
Traveling Tech Guy over 13 yearsWhich browser? What platform? Could you post a screenshot?
-
Rotem over 13 yearsI cant notice any border after clicking it.. Can you explain on which border you talking about..? jsfiddle.net/PQVnT/4
-