IE, CSS: How to remove a highlight which appears, when click the button

Question

Take a look at this page in IE (I have the newest version, but it also happens in older versions.)

http://tinuska.vibraflex.cz/

In above link there are two round buttons at bottom of the page. When you click the button, a semi-transparent highlight around the button appears. It doesn't appear in Mozilla or Chrome. Is it possible to remove it somehow?

enter image description here

Don't see it? Tried in IE10 with and without compatibility mode. — Artless, Aug 07 '13 at 10:51
http://stackoverflow.com/questions/1142819/how-to-remove-dotted-border-around-active-hyperlinks-in-ie8-with-css — matpol, Aug 07 '13 at 10:52
it would be awesome if you had a jsFiddle for you *homework* — achudars, Aug 07 '13 at 10:52
Can't you see this? I cropped this from a screenshot. http://tinuska.vibraflex.cz/img/highlightProb.png — Very Curious, Aug 07 '13 at 11:09

score 1 · Answer 1 · edited Sep 19 '16 at 06:09

1

Add an extra style in anchor tag.

style="background-color:transparent"

edited Sep 19 '16 at 06:09

Rana Aalamgeer

702
2
8
22

answered Aug 07 '13 at 11:50

Nidhi Ranpura

87
11

The background color fix wont work well if we have coloured button, as this would change their actual color. Try the focus outline:none css – techloris_109 Mar 15 '17 at 08:30

Rana Aalamgeer · Answer 2 · 2016-09-20T04:37:17.537

1

TRY It. The below code of css is useful for remove the border and focus around the link or button.

a:focus{
 outline:none !important;
 }

edited Sep 20 '16 at 04:37

answered Sep 19 '16 at 05:34

Rana Aalamgeer

702
2
8
22

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". – abarisone Sep 19 '16 at 14:01
Exact fix @RanaAalamgeer – techloris_109 Mar 15 '17 at 08:28

score 0 · Answer 3 · answered Aug 07 '13 at 11:55

To solve your problem you can add these style attributes to your anchor buttons btn1 and btn2:

border-top-left-radius: 41px;
border-top-right-radius: 41px;
border-bottom-left-radius: 41px;
border-bottom-right-radius: 41px;

I've tried with IE10 and it's working.

An example for btn1:

<a id="btn1" href="#" style="border-top-left-radius: 41px; border-top-right-radius: 41px; border-bottom-right-radius: 41px; border-bottom-left-radius: 41px;"/>

IE, CSS: How to remove a highlight which appears, when click the button

3 Answers3

Linked