Product List field: Checkbox has a faint mark when set as required.

Hi, I have 2 products listed in my form. The First product (Standrad) I have masde as "Required" however this seems to make the "tick in the box" very faint and hard to see.

How do I fix this with still keeping it "required" please

Hi redlandscoastcollectivemarkets,

Thanks for reaching out to Jotform Support. I see that the required checked product in your Product List on this form 260601944821858 is appearing in a faded color, making it difficult to see, and you’d like to adjust it to something more visible. I’ll need a little time to look into this further, and I’ll get back to you as soon as I have an update.

Hi redlandscoastcollectivemarkets,

I've tried chnaging the background color of the checked product list item using custom CSS code but wasn't able to do so I'm checking with my team internally to review this further. I’ll let you know once we hear back from them.

Hi redlandscoastcollectivemarkets,

Thanks for your patience while we’re working on this. You can change the background color of the checked product item by removing some existing CSS code and Injecting CSS Codes. Let me walk you through it:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

2. Next, in the Form Designer menu, click on the Styles tab, scroll down and remove the highlighted code below from the Inject CSS Code box.

3. Then, copy this code:

/*Change background color of the checked product item*/

.form-line[data-payment=true] .form-product-item .p_checkbox .checked 

{

  background-color: blue !important;

}

4. Now, paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Additionally, you can clone my demo form 261098320401952 to see the added custom CSS code and the reflected changes. You can also check out the screenshot below to see my results:

Give it a try and let us know how it goes.

Hi Rahul,

I followed your instructions and it actaully made it worse. Both Product Boxes appeared too light.

I have reversed the code at the moment.

I thenclicked on your link for your cloned demo form and all I have access to is the form itself, I can't view it it in "Edit" to see the CSS Code

Hi redlandscoastcollectivemarkets,

The code my colleague used in his cloned form is the same as the one he provided above. When I cloned your form, I saw that you added a few custom CSS codes. Check out my screenshot below to see my results:

It looks like the CSS codes injected into your form are conflicting, which is why the checkbox background color is gray. I found the CSS code causing the issue. Delete or disable it to fix the issue. Let me show you how:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. Now, in the Form Designer menu, click on the Styles tab, scroll down to the Inject CSS Code box.
3. Then, select the CSS code on lines 11–27 after the closing bracket, and then delete them.

After deleting the CSS codes, add the custom CSS codes below:

/*CSS codes for #37643341*/

.form-label.form-label-auto {

      display: block !important;

      float: none !important;

      text-align: left !important;

      width: 100% !important;

      }

.form-line[data-payment=true] .form-product-item .p_checkbox .checked {

  background-color: blue !important;

}

/*ends here*/

Check out my screenshot below to see my results:

Also, you can’t go directly to the Form Builder of our cloned form. You need to clone our demo form. You can check my cloned form using this link, and then follow our guide on How to Clone an Existing Form From a URL to do that.

Give it a try and let us know how it goes.