How can I change the color and size of the box in the Minimal Checkbox Widget?

How do I change the color and size of the box in my Minimal Checkbox?

You can change your form in our Form Designer, and in Advanced Designer. Please look at the animation below:



In Advanced Designer, you can write your CSS code. First, you should click on a field and then in the box on the right side change whatever you want.

This guide can be helpful: How-to-Inject-Custom-CSS-Codes.

May I ask for the exact CSS script in changing the color of the checkbox for #input_47? I tried

#input_47{

  color: #009688 !important;

}

but does not work.

I analyzed in detail your form and I didn't found the id = "input_47" in it.

I found that there is  "for = input_97". Didn't you mean "id = label_97"?

I recommend you to make a CSS change on this id

#label_97 {

   color: # 009688! important;

}

If it doesn't solve your problem, please show me the screenshot where exactly can be found "#input_47".

Sorry for the confusion @cd_support - There's an option inside the Minimal Checkbox Widget that will allow you to change its current color scheme.

I'm afraid there's no way to change the colors using CSS because this widget uses image sprites. For example, this is what the red color scheme uses:

The least you can do is to wrap the entire div container of the input with its own border that matches the color you want. You can add these CSS codes to achieve that:

.icheckbox_minimal-red, .icheckbox_minimal-red.hover {

    border: 1px solid #009688 !important;

}

Just replace the codes you already have inside the widget with the ones I shared above.

Thanks a lot.