How to change the outline color white selecting with TAB?

Does anyone know how to change the border color of an object while selecting with TAB? I’ve tried in the css with the :focus and :focus:after classes but I can’t get it to change, not with the outline-color or the border-color.

If I select my textfields and buttons with TAB there is a blue outline in the objects, it’s a small thing but there isn’t any blue on my app so it’s not that aesthetic.

If anyone knows how to change that I’ll be so grateful,

Hi Rene,

The focus outline for vaadin-text-field is set like this:

) [part="input-field"]
  box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);

Simply change the last parameter to change the color.