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

  • Profile Image
    AdminRSCM
    Asked on July 21, 2017 at 03:11 PM

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

  • Profile Image
    Jim_R
    Answered on July 21, 2017 at 04:52 PM

    The closest I managed to get was this:

    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.

    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 

  • Profile Image
    AdminRSCM
    Answered on July 24, 2017 at 09:41 AM

    perfect! thanks