3

I am trying to change the color of the outline when an element is active on Safari.

I need to keep all the styling of the default Safari outline, and just change the outline color.

I have tried:

a {

&:focus {
        outline: auto red;
      }
}

also 

a {

&:focus {
        outline-color: red;
      }
}

when I do this

a {
&:focus {
  outline: red solid 2px;
}
}

the color of the outline will change but I loose all the other styling (rounded corners and the fade), I have tried different options with outline, outline-color, outline-style. Nothing seem to work.

Am I missing some basic behavior of Safari?

Thank you!

Bud Anin- Aminof
  • 563
  • 5
  • 10
  • 1
    i prefer you using `border` rather then `outline` as `border` property support lot more then `outline` – Awais Dec 16 '19 at 13:33
  • I should explain that it is for keyboard users, and using a border moves the UI elements (when adding and removing the border). – Bud Anin- Aminof Dec 16 '19 at 17:49
  • There is a solution for that make border transparent by default and then on hover or active etc color that border(without effecting ui) its simple. If you need detail i can give you example of that. – Awais Dec 17 '19 at 05:01
  • 1
    Transparent borders will show as solid when in Windows high contrast mode. – mherchel Nov 29 '20 at 12:35

0 Answers0