Dynamic css - modal dialog form

Dear all,

I was be able to customize all button, all menu, by using .atlas-portal classes… except one !

As you a see on the screenshot, the way to frame the field (div) when the sub-field (input) is in focus, is not trivial.
I would like to customize the color of the border (in green (vs blue)) when the field input is focused.

The issues are:

a new class .dEUJGG is create during the focus.
This is the div whose border color is blue (not the input field)
The id = “setDisplayName” controls the input field and not the div > unusable in a .atlas-portal class
The pseudo-class :focus is not used and naturally, it does not work.

until now, I used a bypass solution:


works perfectly BUT this class is dynamique. I would like customise with a lasting code. Someting like that:

.atlaskit-portal [role=“dialog”] [id = setDisplayName] .focus-visible {

I do not find the correct syntax !

Any ideas ?

Thanks in advance for your help !