How can I stlye my Dropdown Fields like the one shown on my screenshot?

  • AdminRSCM
    Asked on July 21, 2017 at 3:11 PM

    Hi- is there a way to style the drop down form fields to look like the attached image?

    Jotform Thread 1205339 Screenshot
  • Support_Management Jotform Support
    Replied on July 21, 2017 at 4:52 PM

    The closest I managed to get was this:

    How can I stlye my Dropdown Fields like the one shown on my screenshot? Image 1 Screenshot 30

    If that's okay, do the following:

    1. Go to the ADVANCED DESIGNER page by clicking the blue FORM DESIGNER icon then the ADVANCED DESIGNER button.

    2. Once you're there, you need to change the styling of the Dropdown Fields. So, click any dropdown field on your form > go to DROPDOWN STYLES > pick the 2ND STYLE > go back > then SAVE your changes.

    How can I stlye my Dropdown Fields like the one shown on my screenshot? Image 2 Screenshot 41

    3. Afterwards, add the following CSS codes:

    li[data-type="control_dropdown"] > div.form-input:before, li[data-type="control_dropdown"] > div.form-input-wide:before, li[data-type="control_time"] div .form-sub-label-container:before {

        background: #444 !important;

        width: 24px !important;

    }

     

    li[data-type="control_dropdown"] > div.form-input:after, li[data-type="control_dropdown"] > div.form-input-wide:after, li[data-type="control_time"] div .form-sub-label-container:after {

        border-width: 8px !important;

        top: 32% !important;

        border-color: #ddd transparent transparent transparent !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

  • AdminRSCM
    Replied on July 24, 2017 at 9:41 AM

    perfect! thanks