How to change QSelect border color?

[BenJackGill]

On my page I have a QCard and a QSelect element.

It looks like this:

But the QSelect border is slightlty darker than the QCard. So now I want to make the QSelect border the same as the QCard border.

After inspecting the QSelect element I thought I could target it like this, but it has no effect:

<style scoped lang="scss">
.q-field--outlined .q-field__control::before {
  border: 1px solid $separator-color !important;
}
</style>

Can anyone please tell me how to change the border color of the QSelect element?

[BenJackGill]

Does anyone have any ideas for this? I'm still stumped.

[MilosPaunovic]

Your solution works in general (https://codepen.io/milospaunovic/pen/gOKWxEP), but not in your case because of the scoped parameter in style.

[LucianoAngel]

Your solution works in general (https://codepen.io/milospaunovic/pen/gOKWxEP), but not in your case because of the scoped parameter in style.

That does not work on most cases, you will need to use "deep" css property, because q-select is a child component.

<style scoped>
:deep(.q-field--outlined .q-field__control:before) {
  border: 1.25px solid rgb(98 0 255 / 48%);
  transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>