Proform border of active fields

How To
1

Hello, how can I customise the border of the active field in ProForms? When I adjust the border for :active under ‘Global Field Styles’ in the ProForms element, the color unfortunately doesn’t change. If I do this for :hover, the color does change.

2

i guess you are looking for the :focus-visible pseudo :wink:

3

Hi,

Great question, and good news: nothing is broken here. @mofo already pointed you in the right direction. :slightly_smiling_face:

What’s happening is just normal CSS behaviour. The Border control under Pro Forms → Global Field Styles is applied to the field elements (input, select, textarea). When you set that control to the :active pseudo-state, Bricks renders it as input:active.

The little catch is this: on text inputs, :active only matches for the brief moment you’re holding the mouse button down on the field. The second you release and start typing, the field is focused, not active anymore, so the :active styling stops applying and it looks like nothing changed. :hover works because the pointer is genuinely sitting over the field the whole time.

For “the field the user is currently in,” the state you actually want is focus.

If you’d rather set it once for all fields at the same time, a small CSS snippet on the form element does the job too:

.form-group input:not([type="submit"]):focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #yourcolor;
}

Give the focus state a try and let me know if that does the trick for you. Happy to help further if anything’s still off!

Best,
Daniele

4

Thank you very much for your feedback. I had already disabled the border using the following snippet:

%root% .form-group input:not([type="submit"]):focus,
%root% textarea:focus,
%root% select:focus {
  outline: none;
}
1 Like