Add css to prevent safari (and firefox) from applying focus outline to focus elements

[TheRealThor]

Describe the feature I suggest to add the following css:

:global(.rangeSlider *:focus) { outline:none !important; outline-style: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

Explain it's value / reasoning Safari and apparently firefox add to focus elements a blue ring, with css we can prevent that.

[simeydotme]

you're referring this, I guess?

chrome	safari

---

Hmm, on one-side, the focus frame is important/useful for accessibility when navigating with Keyboard. But on the other side it does appear Safair/Firefox is over-zealously applying the focus-frame even on mouse interaction.

I won't blanket remove it, but thanks for raising and I'll see if there's a way to disable for mouse/touch interactions.

[simeydotme]

seems what I need is focus-visible; https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#basic_example

[simeydotme]

resolved by https://github.com/simeydotme/svelte-range-slider-pips/commit/3e6c1019cfa29ce5a22ae5095d98544bd0dfc318#diff-8361d0a16c946316e9bb97b31b167819e94934619153783444beca2a671cb499