How to go about changing focus colors

[Jaylyn-Barbee]

I am making a custom form using the sl-input component and I wanted to change the colors during focus.

How would I go about changing that blue box shadow and border color using css?

I have tried:

:root {
  --sl-focus-ring-width: 1px;
  --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) #4F3FB6;
  --sl-input-border-color-focus: #4F3FB6;
}

with no success

[Jaylyn-Barbee]

I think I figured it out. Had to use :host instead of :root

[claviska]

See also: https://codepen.io/claviska/pen/XWVvgma

[Jaylyn-Barbee]

Thanks a lot!