Formatting Checkbox in Dropdown widget

  • Profile Image
    JamieHoh
    Asked on May 11, 2016 at 03:27 PM

    Hi,

    Could you help to get the "Checkbox in Dropdown widget" to match my other boxes?  I see an option for css code, but don't know how capture what the code is for my other boxes.

    Thank you for your time!

    Jamie

     

     

  • Profile Image
    BJoanna
    Answered on May 11, 2016 at 04:15 PM

    If I understood you correctly you want to change border size and color of Checkbox in Dropdown widget. Is this what you want to achieve? 

    You can achieve this by adding this code inside of Checkbox in Dropdown widget Custom CSS:

    .selecter .selecter-selected {    

        border: 2px solid #00653b!important;    

    }

    .selecter .selecter-item {    

        border: 2px solid #00653b!important;

    }

    Here is my demo form: https://form.jotform.com/61316497734967 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    JamieHoh
    Answered on May 11, 2016 at 04:32 PM

    Yes, this is great...thanks so much!  It looks way closer to the form, but it appears the box has rounded corners and is slightly larger width.  Is it possible to make it mirror other box size, font, etc? 

  • Profile Image
    BJoanna
    Answered on May 11, 2016 at 05:05 PM

    Replace code I previously provided you, with this CSS code:

    .selecter .selecter-selected {    

        border: 2px solid #00653b!important;

        border-radius: 0px!important;

        font-weight: bold!important;

        color: #000!important;   

    }

    .selecter .selecter-item {    

        border: 2px solid #00653b!important;

        font-weight: bold!important;

        color: #000!important;    

    }

    This code will remove rounder border and change font color and make font to be bold.

    Then select widget properties and change width of the widget to 268.

    After that your form will look like this.

    Here is my new demo form: https://form.jotform.com/61316106772956 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    JamieHoh
    Answered on May 11, 2016 at 10:16 PM

    Thanks so much!  Greatly appreciate your quick and helpful reply.