Border around button with MS EDGE

HTML & CSS
1

When using MS EDGE, using the below code as an example, if you keep the mouse pressed down on the link, it has a border around it. This border doesn’t appear with FF or Chrome. Also, other buttons with different code has the same result. Is there a work around with this?

Thanks!

<style>
.container {
  text-align: center;
}
.button {
  text-decoration: none;
  background-color: #238fff;
  border: 0px solid #238fff;
  color: #ffffff;
  display: inline-block;
  font-size: .8em;
  font-family: Arial, Helvetica, sans-serif;
  padding: 8px;
  border-radius: 30px;
  width: 250px;
  height: 30px;
  transition: 0.35s;
}
.button:hover {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #4c659b;
  border-color: white;
  color: #ffffff;
}
</style>
2

Let it be. :winky:

MS EDGE is obviously using it as an accessibility aid.

  1. The plague of outline:0
  2. Links and Hypertext

coothead

2 Likes
3

Thanks for that. I was using border:0 and that wasn’t doing the trick. Yours did, thanks again!

4

Ugh. :eek:

I don’t think that you read the links, or if you did
then failed to comprehend their significance. :unhappy:

coothead

1 Like
5

Not sure if I understand. outline:0; added to css did work. Please explain, thank you.

6

The links in @coothead’s post explain!

7

oops, sorry - I see now. I looked at your post in the email, not opening the page and in the email it wasn’t apparent that it was linked. I will read it now. Thanks.

8

Got it, thanks

" There is no visual indication of which link currently has the keyboard focus because the outline and the text-decoration for links have been removed. The result – total keyboard inaccessibility ."

1 Like
9

At my advanced age, I really should have known that…

“The road to hell is paved with good intentions.”

coothead

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.