How to change the blue accent around an <sl-input> field?

Question

I am currently using shoelace.style's componants, but <sl-input> when clicked, gets a blue border around it. I have tried everything i know, even used ::part() on each part of the componant. But I cannot stop the blue showing up or even change its color.

<sl-input class="input-field"></sl-input>

.input-field::part(base):focus{
  border-color: #000;
}

I was expecting

.input-field::part(base):focus{
    border-color:#000;
}

to change the blue border to black. I have even tried removing :focus and just using the base selector. Nothing seems to work, and I don't really understand Firefox DevTools to see what class is called when clicked.

Answer 1

The correct way is to use the following. I used "darkorange" instead of default blue.

--sl-input-focus-ring-color: darkorange;
--sl-input-focus-ring-style: solid;
--sl-input-focus-ring-width: .01em;
--sl-input-focus-ring: var(--sl-focus-ring-style) var(--sl-focus-ring-width) darkorange;
--sl-input-focus-ring-offset: 1px;

Answer 2

I know this is an old question, but it comes up as the first result on search engines etc.

The glow is created by --sl-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);

SO you can just change it, this is hue, saturation, lightness and you can do the conversion to get your hsl value at https://htmlcolors.com/hex-to-hsl

If you are very happy with the style and just want to change the glow, then use.

sl-input:{--sl-input-focus-ring-color: hsl(0 100% 50% / 40%);}

that will create a red glow, but it will look wrong because the border of the input becomes blue because of a colour setting in the theme. The border is controlled by the setting --sl-color-primary-500

so if you want all the borders on the whole page to be the same change the primary colour to red, you can copy the following here to do it https://codepen.io/claviska/full/QWveRgL it will auto generate all the different colours to add into your theme simply pick the right base colour and add them to the the css at the top. However if you just want to over ride this one input, you can do so on it of course. To to that you simply.

sl-input:{--sl-input-focus-ring-color: hsl(0 100% 50% / 40%);
--sl-input-border-color-focus: red;}

Like the other person said, you can go into further depth and customize the whole lot should you wish, the width, offests, etc.