Form Dropdown styling

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?

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.

ok great

thank you

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".

It should look like this after:

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

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

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

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

where is the cloned form?

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

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

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:

Firefox:

IE:

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

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;

}

}

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

Thanks.