Question

Is it possible to change the size of the yellow highlight box of an actively selected field?

Forms

Updated April 15, 2020

asked on April 15, 2020

I've modified the size of quite a few fields to make them more visually appealing on a form, but the yellow highlight boxes that appear when fields are actively selected did not adjust along with those changes, making them appear really strange. Is there any CSS that can be added to modify this? Any help would be much appreciated. Thanks!

0 0

Replies

replied on April 15, 2020

You should be modifying the size of the li elements (#q2, etc.) instead of the input boxes. It's general CSS best practice to not have something larger than its parent or it can produce undesired effects like those.

For the email one, where the input field is larger than the yellow, give the overall element (ie #q5 or something) a width of 35% which looks like it will be about right:

#q5 {
  width: 35%;
}

For the address fields, try this instead of what you're using:

.cf-address.cf-fluid, .cf-address.cf-fluid .cf-xlarge {
  width: 100%;
}

1 0

replied on April 15, 2020

Thank you very much Jim! That solves the issue! If I want to be able to have varied address fields though, how do I go about that? This form is massive and has 18 pages, and depending on the fields before/after it, I'm trying to justify the address fields so that they're left aligned and right aligned.

0 0

replied on April 15, 2020

Glad to help!

You could change it to this:

.address-selector .cf-fluid, .address-selector .cf-xlarge {
  width: 100%;
}

and then add "address-selector" to the CSS class of the field(s) that you want it to apply to.

0 0

You are not allowed to follow up in this post.

Question

Question

Is it possible to change the size of the yellow highlight box of an actively selected field?

Replies

Sign in to reply to this post.