I tried this example: removing css button outline ie 6.0, 7.0
...by adding outline:none; and border:none; but that doesn't resolve the issue, as you can see here:
What do I do to get rid of that pesky little outline?
-
possible duplicate of removing css button outline ie 6.0, 7.0Quentin– Quentin2012-06-08 14:32:18 +00:00Commented Jun 8, 2012 at 14:32
-
It looks correct in Chrome. Is there any reason you can't use submit instead?chadpeppers– chadpeppers2012-06-08 14:33:03 +00:00Commented Jun 8, 2012 at 14:33
-
Are you using a reset style sheet? I can also confirm that there is no outline in IE7.Matthew Riches– Matthew Riches2012-06-08 14:33:30 +00:00Commented Jun 8, 2012 at 14:33
-
If a question doesn't have good answers, then offer a bounty on it, don't just ask it again.Quentin– Quentin2012-06-08 14:34:02 +00:00Commented Jun 8, 2012 at 14:34
-
Using FireFox 13.0, weird sometimes it shows, sometimes it doesn't, wondering if its a browser glitch.Control Freak– Control Freak2012-06-08 14:37:50 +00:00Commented Jun 8, 2012 at 14:37
|
Show 4 more comments
3 Answers
try the solution mentioned in this article. http://www.karlrixon.co.uk/writing/remove-button-focus-outline-using-css/
Comments
When I look at the jsfiddle example, it appears that there is no border. If you are talking about the grey inside the button surrounding the text, simply add "background:white;" to your code and it will be a button the same color as the background so that you only see the words
Comments
You should not remove the outline from a button or a link when it's focused. This is an essential indication to disabled users and many others who want to know if what they intended to do has been understood by their browser and done (successfully clicking on the right button or not; visual indication of where they're when using the tab key because they can't or don't use a mouse)
See W3C WCAG 2.0 Technique named F78
Failure due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
