0

I've searched all over the web and tried every remedy posted to no avail; most of the answers don't fit my situation anyway.

The Code:

<form method = "post" action = "index.php">
    <input type = image alt = Submit alt = "" id = "zy" src = "Images/Button_Close_1.png" onmouseover = "this.style.cursor = 'hand';
     SetImage('zy','Images/Button_Close_2.png');
     return false;"  onmouseout = "SetImage('zy','Images/Button_Close_1.png');
     return false;" border = "0" height = "37" width = "183" />
</form>

SetImage is a javascript function which takes the first image and replaces it with the second, giving you a custom "hover" button.

There's probably an easier way to do it with CSS, but I've been using this code for a while.

The Issue: In the latest versions of Chrome (thank you, Google), these images all have an ugly blue border around them when you click them. I can't seem to get rid of it!

I need my custom images for my forms, but I really want to get rid of this line. Any ideas?

Upperstage
  • 3,747
  • 8
  • 44
  • 67
TheWebExpert
  • 9
  • 3
  • possible duplicate of [Best way to reset / remove chrome's input highlighting / focus border](http://stackoverflow.com/questions/2943548/best-way-to-reset-remove-chromes-input-highlighting-focus-border) – Jamie Barker Jun 23 '15 at 15:54

3 Answers3

0

As NKL in Remove blue border from open element suggest:

Try outline: none in your CSS

Example:

image{
    outline:none;
}

The blue border might seem ugly, but still it is good on pages to help with TAB navigation and for better orientation for disabled people.

Community
  • 1
  • 1
Aldoras
  • 111
  • 7
0

To remove it from all inputs, buttons and images :

input:focus, textarea:focus, select:focus, button:focus, img:focus {
    outline: none;
}
Laurent
  • 469
  • 3
  • 7
0

The two solutions in this thread conflict with accessibility best practices.

See some great suggestions here: https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/

TL;DR: The outline is intended to show keyboard focus, and some form of visual indicator should always be there.

Adam Pirani
  • 11
  • 1
  • 1
    Your answer should go as a comment. You did post a outer link. That is not encoureged at all. See "how to answer" on SO. – user14063792468 Oct 17 '20 at 00:37
  • I'm sorry this was literally my first attempt to contribute to SO, and saw a link in the first response. I felt that providing background on my response would help provide context for my response. Ironically enough, I could use a link to "how to answer" – Adam Pirani Oct 18 '20 at 01:15
  • You should use "how to answer" link on such answers as yours. If you want to provide a context for your answer, you should take an effort and put some text here. The context may be an excerpt from the documentation or citation. No matter what, this site has all means to support this type of formatting. – user14063792468 Oct 18 '20 at 18:46
  • What is a "how to answer" link? – Adam Pirani Oct 19 '20 at 19:41
  • [how to answer](https://stackoverflow.com/help/how-to-answer) – user14063792468 Oct 19 '20 at 21:51