How to change the color of configurable list widget fields' label and adjust its height?

Good Morning,

In the purple box, beneath "Birthday," How can I change the color of the words "Month" and "Day" so they are more visible? Also, how can I shorten the height of the box so there isn't so much extra space after the Month and Day boxes?

Thank you for your help.

Hi Belinda,

Thanks for reaching out to Jotform Support. We can change the color of your field labels within the Configurable List widget using a few CSS codes. Let me show you how to do that:

1. In Form Builder, click on your Configurable List widget and on its Wand icon.
2. Next, under the Custom CSS tab, paste the following codes:

/* 16467621 - change field labels color*/

#listContainer .configurable-list-field-label {

color: white;

}



@media screen and (max-width: 480px) {

#listContainer .configurable-list-field-row-wrapper .configurable-list-field-row {

    flex-direction: row;

}

/* Ends here */

Now, we can reduce its height by applying CSS codes to the form. Let me walk you through it:

1. In Form Builder, click on the Paint Roller icon on the right.
2. Under the Styles tab, paste the following codes:

/* 16467621 - reduce height of configurable list widget*/



#id_94 {

 height: 150px !important;

}

That's it. Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have guides on How to Inject Custom CSS Codes and How to Inject CSS Codes to Widgets that you can check out.

Give it a try and let us know if you need any help.

Thank you so much for your assistance.

Everything worked out perfectly.

Belinda

P.S. I hope you have a wonderfully blessed day.