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

  • montsho
    Asked on August 10, 2015 at 3: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.

     

    Jotform Thread 633457 Screenshot
  • Sammy
    Replied on August 10, 2015 at 7: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

     

  • montsho
    Replied on August 10, 2015 at 10:30 AM

    Hey! My form is NOT deleted. Not sure why that's what you saw. Here's the link:

    http://form.jotformpro.com/form/52197968569983

     

    I'm attaching an image of what I would like the checkboxes to look like. (#5)

    Modifying the color and look of a checklist (not widget) Image 1 Screenshot 20

     

  • montsho
    Replied 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.

    Modifying the color and look of a checklist (not widget) Image 1 Screenshot 20

  • Sammy
    Replied on August 10, 2015 at 12:56 PM

    I'm able to access the form now, kindly paste the code in this pastiebin site

    http://pastiebin.com/55c8d5d085e4a

    Unfortunately for the coupon input it is contained in an iframe which does not allow direct modification using custom CSS code so that portion will remain with the default look.

    By default when posting a thread to an already private thread it will be marked as private since the main thread is already set to private, this option is available when you are creating a new thread

    Modifying the color and look of a checklist (not widget) Image 1 Screenshot 20

    A private thread is viewable only by the poster and the support team

  • montsho
    Replied on August 10, 2015 at 1: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.

  • montsho
    Replied on August 10, 2015 at 1:05 PM

    This is what I see when I post an answer:

    Modifying the color and look of a checklist (not widget) Image 1 Screenshot 20

  • montsho
    Replied on August 10, 2015 at 1: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.

  • montsho
    Replied on August 10, 2015 at 1:18 PM

    Also, my original post was not marked private.

  • Welvin Support Team Lead
    Replied on August 10, 2015 at 2: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

  • montsho
    Replied on August 10, 2015 at 4: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.