What is the code to change the outline color of a check box?

  • Profile Image
    jeffnorthway
    Asked on April 03, 2019 at 08:34 AM

    What is the code to change the outline color of a check box? And since I am at it, how do I change the inside color of a check box?

    Thanks for any help!

    Love the form!



    This is a re-post of a comment on Customize Your Form Using Custom CSS Codes

  • Profile Image
    betty
    Answered on April 03, 2019 at 10:22 AM

    I am looking into this. I will get back to you as soon as possible.

  • Profile Image
    betty
    Answered on April 03, 2019 at 12:26 PM

    You can change the style of your radio buttons and checkboxes from advanced form designer. Since you did not provide a form I cloned one of your forms and followed the steps below:

    1. Click on the paintbrush icon on the right of the page.

    2. Go to the Advanced Designer.

    3. Click on one of the single choice or multiple choice fields.

    4. Select the desired style of button and change color if you want.

    You can see these steps in the GIF below:

    1554308699checkboxchange.gif

    If you need further assistance, please let us know.

  • Profile Image
    jeffnorthway
    Answered on April 03, 2019 at 02:28 PM

    Betty,


    It does not seem to work with the widget I am using.


    Here is the link to the page: https://form.jotform.com/90923041044144


    Go to the section where the list of name are. See the faint white check box to the left of each name. That is the box I need control of.


    What do you think?


    Jeff

  • Profile Image
    gerardw
    Answered on April 03, 2019 at 04:17 PM

    Please insert the below CSS code into the Gift Registry widget:

    .checklist label.checkbox .before {

        border: 3px solid #888 !important;

    }

    Result:

    1554322565The Easiest Online Form Builde

    Do check if this suits your requirement, else we can assist you further.

    The guide below will help you to insert CSS codes in widgets:

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


  • Profile Image
    jeffnorthway
    Answered on April 03, 2019 at 05:09 PM

    This code worked perfectly. I did change the boarder color to #a06c1e.

    Since I have you. Can I get the code for the "1 Employee?" The green is awful.

    Thanks so much for your help!


  • Profile Image
    Mike
    Answered on April 03, 2019 at 06:31 PM

    Add the next CSS to the widget in order to change the color of the  "1 Employee" text:

    .items-left{
    color: #a06c1e
    }

    If you need any further assistance, please let us know.

  • Profile Image
    jeffnorthway
    Answered on April 03, 2019 at 06:59 PM

    That was it! Thanks.

    Is there a library of basic codes for the widget that might help me in the future?

    If not, I really appreciate how fast all of you responded.


  • Profile Image
    jonathan
    Answered on April 03, 2019 at 08:07 PM

    Please refer to the user guide: How to Inject CSS Codes to Widgets

    For the colors codes, rules, elements, etc... you need to learn how to use browser inspector tool.

    Finding Elements using Browser Inspector