rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.27k stars 180 forks source link

Changing focus border styling to be on the outside #625

Closed AndreasPB closed 1 year ago

AndreasPB commented 1 year ago

Hi, Rob (and possibly others),

I love the library

Sorry for this "non-issue"-issue, but I didn't know where else to ask this

I'm having trouble getting the svelte-select's focus border on the outside like the rest of my styling. If I'm not wrong the default border position is on the outside, but I cannot figure out what svelte-select does to change that

Added a video to show the difference - The svelte-select is the "Søg efter person" where you can see the inner text jump when focused:

https://github.com/rob-balfre/svelte-select/assets/43907402/068a0038-143d-4ec4-9815-cf7767c6d1b4

Any help is very much appreciated

rob-balfre commented 1 year ago

Try box-shadow?

:global(.svelte-select.focused) {
   box-shadow: 0px 0px 0px 5px pink;
}
AndreasPB commented 1 year ago

That did the trick, thank you :)