如何更改字段周围的蓝色重音<sl-input>？

Question

我现在使用鞋带。样式的组件，但是单击<sl-input>时，它周围有一个蓝色边框。我已经尝试了我所知道的一切，甚至在组件的每个部分上使用::part()。但是我不能阻止蓝色的出现，甚至不能改变它的颜色。

<sl-input class="input-field"></sl-input>
.input-field::part(base):focus{
border-color: #000;
}

I was expected

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

将蓝色边框改为黑色。我甚至试过删除:focus，只是使用基础选择器。似乎没有工作，我真的不明白火狐DevTools看到什么类被调用时点击。

Answer 1

正确的方法是:我用了"暗橙色"。而不是默认的蓝色。

--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;