How to change text and check mark color in the fancy checkboxes widget?

  • melissacrowley
    Asked on July 19, 2018 at 4:07 PM

    I would like the text to be able to patch the colors of the rest of my form. What is the css I need to change to make that happen?


    Also, can I change the color of the check mark?


    Finally can i add a custom submit button? When i try using an image there is a weird outline around it ( see file attached)

    Jotform Thread 1529718 Screenshot
  • Welvin Support Team Lead
    Replied on July 19, 2018 at 6:21 PM

    You can change the text color of the widget by adding the following custom CSS codes in the CSS area:

    .ffCheckboxWrapper a { color: #1f4f86; }

    .ffCheckboxWrapper:hover a, .ffCeckboxWrapper.focus a { color: #1f4f86; }

    Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets.


    The checkbox is an image but can be changed into colors. I will work on this and let you know.

    As for the custom image, just add it back and let us know here so we can also check and give you the CSS codes to remove the button border or shadow.

  • Welvin Support Team Lead
    Replied on July 19, 2018 at 7:16 PM

    Inject the following custom CSS codes in the Fancy Checkbox widget, below the previous codes that I gave you:

    .ffCheckbox {

        background-color: #1f4f86;

        background-image: none;

    }

    .ffCheckboxWrapper.on .ffCheckbox:after {

        content: '';

        position: relative;

        z-index: 10;

        display: inline-block;

        left: 6px;

        top: 1px;

        width: 5px;

        height: 10px;

        border: solid white;

        border-width: 0 3px 3px 0;

        -webkit-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

        transform: rotate(45deg);

    }

    The output should be like this:

    How to change text and check mark color in the fancy checkboxes widget? Image 1 Screenshot 20

    Also, you may consider the following widgets that allow you to change its theme:

    https://widgets.jotform.com/widget/minimal_checkbox

    https://widgets.jotform.com/widget/square_checkbox

    https://widgets.jotform.com/widget/flat_checkbox 

  • melissacrowley
    Replied on July 20, 2018 at 9:11 AM

    Thank you for the suburb customer support! That worked perfect! As far as the submit button that was on another form I am working on... https://www.jotform.com/build/81995458284171#preview


  • melissacrowley
    Replied on July 20, 2018 at 10:41 AM

    If it helps I really want my form to stay similar to the one we are currently using and would like my submit button to look like the one here: https://erpgovcloud.com/contact-us.php


  • Welvin Support Team Lead
    Replied on July 20, 2018 at 12:04 PM

    No worries. I'll work on the submit button style and update you on this new thread here https://www.jotform.com/answers/1530494