Modifying the color and look of a checklist (not widget)

  • Profile Image
    montsho
    Asked on August 10, 2015 at 03:50 AM

    Hey there amazing Jotform support! I promise I searched high and low and could not find the answer to this question.

    I want my form check boxes to all LOOK THE SAME. It's my understanding I CAN NOT change the look of a checklist widget with CSS. I'm trying to change the default checklist (not a widget) so that the actual check box is a white square box. I was able to change the box to a flat box with the designer BUT the box in the designer is rounded and grey. Can I change the box to white and completely square? If so, how? I could not figure out the CSS.

     

  • Profile Image
    Sammy
    Answered on August 10, 2015 at 07:43 AM

    I have tried accessing the form but it seems you have deleted it, please let us know if you still need some help with the check-boxes.

    Meanwhile you can review this resource regarding styling of check-boxes using CSS

    http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

     

  • Profile Image
    montsho
    Answered on August 10, 2015 at 10:33 AM

    I'm not sure what is going on with the forum. I have to post 2 and three times bc it's not taking my posts on the 1st time. It's also marking my replies as private and they ARE NOT MEANT TO BE PRIVATE. AND the image uploader is not working. I tried it several times, in different browsers and rebooted my computer. See screenshot.

  • Profile Image
    montsho
    Answered on August 10, 2015 at 01:03 PM

    And again the forum form is NOT working. This is what I see when I try to respond to your replies. There is nothing that says make my ANSWER private. It just says post answer. But my responses are being posted private. All I can figure is that since I COULD NOT UPLOAD MY IMAGE BC YOUR IMAGE UPLOADER IS NOT WORKING, your form made my answer private bc my image is "private" on Facebook.

    I'm going to attach the image separately bc the IMAGE UPLOADER IS STILL NOT WORKING. UUUUUUuuuuggghhh...Cmon Jotform.

  • Profile Image
    montsho
    Answered on August 10, 2015 at 01:05 PM

    This is what I see when I post an answer:

  • Profile Image
    montsho
    Answered on August 10, 2015 at 01:07 PM

    Now on to my question. PASTE WHAT CODE? 

     

    MY QUESTION AGAIN:

    I want my form check boxes to all LOOK THE SAME. It's my understanding I CAN NOT change the look of a checklist widget with CSS. I'm trying to change the default checklist (not a widget) so that the actual check box is a white square box. I was able to change the box to a flat box with the designer BUT the box in the designer is rounded and grey. Can I change the box to white and completely square? If so, how? I could not figure out the CSS.

     

    I am asking about the DEFAULT CHECKLIST TOOL.

  • Profile Image
    montsho
    Answered on August 10, 2015 at 01:18 PM

    Also, my original post was not marked private.

  • Profile Image
    Welvin
    Answered on August 10, 2015 at 02:43 PM

    Inject the following custom CSS codes to your form:

    .form-checkbox-item:not(#foo) label:before {

        border: 2px solid #F8F9FF !important;

        border-radius: 0px !important;

    }

    #coupon-container {

    border-radius: 0px !important;

    border: 1px solid #fff !important;

    }

    #coupon-input {

    background-color: transparent !important;

        color: #fff !important;

        padding: 2px !important;

        border: 1px solid #fff  !important;

    }

    #coupon-button {

    background-color: #ebc52a !important;

        border: 1px solid #ebc52a !important;

        color: #fff !important;

        padding-bottom: 2px !important;

        padding-top: 2px !important;

    }

    The style output should be like this: http://www.jotformpro.com/form/52215956290962 (Cloned version of your form).

    Here's how to add: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. Please add the codes at the bottom part.

    Thanks

  • Profile Image
    montsho
    Answered on August 10, 2015 at 04:26 PM

    AND BOOM! Worked like a charm. #happydance

    So appreciate your amazing commitment to customer service JOTFORM TEAM.

    Not to be unappreciative but can you guys fix the image uploader issue please??? I use this forum and it's a life saver. I want others to be able to see my questions answered so they can get the same help if needed.