Form Dropdown styling

  • Profile Image
    AdminRSCM
    Asked on January 23, 2018 at 12:21 PM

    Is there a way to style my dropdown questions to look like the attached file?

    The dropdown box is white, square and has a dropdown arrow in a grey box, and the dropdown list of options alternative between light and dark grey colors?

  • Profile Image
    Mike_G
    Answered on January 23, 2018 at 01:59 PM

    I believe it is possible using CSS codes that can in injected in your form. Please allow me some time, I'll try my best to create a solution that will meet the requirements you described.


  • Profile Image
    AdminRSCM
    Answered on January 23, 2018 at 02:16 PM

    ok great

    thank you

  • Profile Image
    Mike_G
    Answered on January 24, 2018 at 09:37 AM

    I would like to apologize for any delays. The solution I have below would not make the drop-down in your form to look exactly like the one in the screenshot you shared with us, but it will meet your requirements — "The drop-down box is white, square and has a drop-down arrow in a grey box, and the dropdown list of options alternative between light and dark grey colors?"

    First thing that you need to do is is get the number on the Field ID — How-to-Find-Field-IDs-and-Names

    And update the number highlighted in the CSS codes below with that number before injecting it to your form — How-to-Inject-Custom-CSS-Codes

    [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide {

        width: 150px !important;

    }

    select#input_7 {

        border: none !important;

        padding: 5px 15px !important;

        color: #000000 !important;

        width: 240px !important;

        height: 30px;

        font-size: 15px;

    }

    li#id_7 > div.form-input-wide:before {

        background: #E6E7E9;

        right: -83px;

        height: 20px;

        width: 30px;

        top: 5px;

        border: none !important;

    }

    li#id_7 > div.form-input-wide:after { 

        width: 10px;

        height: 10px;

        border-width: 2px;

        border-color: transparent white white transparent;

        top: 4px;

        right: -75px;

        transform: rotate(45deg);

    }

    select#input_7 option:nth-child(even) {

        background: #f2f2f2;

        height: 30px !important;

    }

    select#input_7 option:nth-child(odd) {

        background: #dedfe1;

    }

    select#input_7 option:first-child {

        display:none !important;

    }

    Here's a clone version of your form where I have injected the codes above — https://form.jotform.com/80233514689965

    You also have the option to enable the "Show Text in Empty Option".

    1516804495t09_33_16.png

    It should look like this after:

    1516804634t09_36_16.png

    I hope this helps. If you have other questions,  please feel free to contact us anytime.

  • Profile Image
    AdminRSCM
    Answered on February 13, 2018 at 09:48 AM

    I don't see the alternate colors on the dropdown list.


    Here is the form: https://form.jotform.com/80433929758166


  • Profile Image
    BDAVID
    Answered on February 13, 2018 at 11:02 AM

    I just checked that form, and the colors are taking effect. I cloned it, and added more options, this is how it looks:

    1518537724colors.png

  • Profile Image
    AdminRSCM
    Answered on February 13, 2018 at 12:46 PM

    where is the cloned form?

  • Profile Image
    BDAVID
    Answered on February 13, 2018 at 01:01 PM

    I cloned the last form example you shared, here it is: https://form.jotform.com/80434039226957 

  • Profile Image
    AdminRSCM
    Answered on February 14, 2018 at 10:26 AM

    how can those styles be applied to this form? https://form.jotform.com/80433929758166 

    also, these styles look off in different browsers.

    see examples attached

    1518621888safari.jpg

    1518621963firefox.jpg

    1518621976google-chrome.jpg

  • Profile Image
    BDAVID
    Answered on February 14, 2018 at 10:58 AM

    The dropdown are shown differently on each browser, that's something that can not be changed, as it is related to the browser. However, the background options remain the same:

    Chrome:

    1518623851background.png

    Firefox:

    1518623868background_001.png

    IE:

    1518623888background_002.png

  • Profile Image
    AdminRSCM
    Answered on February 14, 2018 at 11:12 AM

    can i fix the dropdown arrow? I think it looks odd if there are two arrows next to each other?

  • Profile Image
    BDAVID
    Answered on February 14, 2018 at 11:31 AM

    The following code will remove the extra arrow that is shown in Firefox browser: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    @-moz-document url-prefix() { 

    li#id_3 > div.form-input-wide::after {

        display: none !important;

    }

    }

  • Profile Image
    AdminRSCM
    Answered on February 14, 2018 at 01:53 PM

    how can i remove that border around the form?

    http://m2p.417.myftpupload.com/


  • Profile Image
    jonathan
    Answered on February 14, 2018 at 03:09 PM

    We will resolve the next question on another thread here https://www.jotform.com/answers/1384668

    Thanks.