Inject Custom CSS > Configurable List Widget: Change the Add Row button color

Can someone recommend a CSS code to change the color of the "add" button? With the default being gray, respondents think it is inaccessible (of course they don't try first).

Hi Dana,

Thanks for reaching out to Jotform Support. We can change the background color of the add row button in the configurable list widget by using a few CSS codes. Let me show you how:

1. First, copy this code:

/* change add row button bg color - 26806091*/

#listContainer .add {

background: red;

}

#listContainer .add:hover {

background: orange;

}

/* Ends here */

2. Next, in Form Builder, click on the Configurable List widget and on the Wand icon next to it.

3. Then, click on the Custom CSS box, paste the codes there and click on the Update button.

This is how it would appear:

That's it. Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject CSS Codes to Widgets that you can check out. You may also update the colors in the codes we provided above.

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

Thanks for your help. I actually found a code right after I posted my question. It's not the same as yours but it worked.

.add{

font-weight: bold !important;

background: #367c96 !important;

}

Hi Dana,

We're glad to hear that you were able to achieve your desired result using your CSS code. Keep in mind that CSS can often be written in different ways to produce the same output, so variations in the code are completely normal. We'll take note of your solution and consider it as a helpful reference in case other users encounter a similar issue.

Let us know if there’s anything else we can do for you.