Focus state on text field and wrapper

[froonthego (David Stone)]

I am trying to trigger a focus state on my forms beyond just the text field. I have the text field wrapped in an additional wrapper so that there are two lines outlining the field. I’d like for the focus state to make both lines turn blue when focused. Right now it seems like i can only make the inside text field outline change. How do i do that?

[esmit104 (Evan)]

This can be done under the border section. Set the top and bottom as blue.

[esmit104 (Evan)]

Nevermind, I read the post wrong

[Blaise_Posmyouck]

Hi @froonthego

I think you will need custom code here.

Try adding some css in your site footer, replace the second class with your wrapper class

.form-field w-input:focus + .YOUR WRAPPER CLASS {
color: blue;}

Hope this works

[froonthego (David Stone)]

Thanks! Tried this but didn’t seem to make a difference. Do I need to change the .form-field to match my text field class? I changed the exterior wrapper in place of .YOUR WRAPPER CLASS
So it looks like this now,
.TextField w-input:focus + .Textfield-wrapper {color: #43c1f0;}
Here is another screenshot just to clarify. I need both white lines to focus when the textfield is activated.

[Blaise_Posmyouck]

Try your code without the uppercase to the “t” of “TextField” (same for the first “F”)

If it still doesn’t work, try w-input:focus + .textfield-wrapper {color: #43c1f0;}