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

  • Profile Image
    cd_support
    Asked on March 12, 2019 at 11:19 AM

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

  • Profile Image
    Bojan_R
    Answered on March 12, 2019 at 12:18 PM

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

    1552407002form designer.gif

    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.

  • Profile Image
    cd_support
    Answered on March 12, 2019 at 01:47 PM

    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.

  • Profile Image
    Bojan_R
    Answered on March 12, 2019 at 03:15 PM

    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".

  • Profile Image
    cd_support
    Answered on March 13, 2019 at 10:22 AM

    1552486911Capture.JPG

  • Profile Image
    Jim_R
    Answered on March 13, 2019 at 12:36 PM

    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.

  • Profile Image
    cd_support
    Answered on March 13, 2019 at 06:03 PM

    Thanks a lot.