How to change the color of the Flat Checkbox Widget?

Hello, is there any way to change the color of the flat checkbox when unchecked? I'm adding a lot of rows to my form and would like to contract rows with colored backgrounds, but whatever color I choose I need to change the checkbox to white.

Hi Tom,

Thanks for reaching out to Jotform Support. You can Inject this Custom CSS Code in your Flat Checkbox Box Widget.

.icheckbox_flat-grey { 

background-position: 0 20px !important;

border: 1px solid #B3BFBF; 

border-radius: 4px;

} 

.icheckbox_flat-grey.checked { 

border: 0px !important; 

background-position: -22px 0 !important;

}

Let me show you how:

1. In Form Builder, select the Flat Checkbox Widget and click the Wand icon.
2. Go to the Custom CSS tab, and add the Custom CSS Code.
3. Then, go to the General tab, select Grey in a Color Scheme section, and change the Font Color to #FFFFFF.
4. Click Update Widget.

Since the background color of the widget is still grey, the Custom CSS Code added in the widget will not reflect. You need to change the color of the background in your CSS Code under the Form Designer.

In your existing CSS Code under Form Designer, locate this code:

[data-css-selector="id_13"] {

  width: 75px;

  background: #d3d3d3;

}

Change the background color to #FFFFFF.

Let me show you how:

1. Click the Paint Roller icon on the upper right side.
2. Go to the Style tab, scroll down to the Inject Custom CSS, and locate the code above.
3. Change the background color to #FFFFFF.

Check out the screencast of the result below:

Feel free to check out my cloned form here.

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