-
AdminRSCMAsked 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?
-
Mike_G JotForm SupportReplied on January 23, 2018 at 1: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.
-
AdminRSCMReplied on January 23, 2018 at 2:16 PM
ok great
thank you
-
Mike_G JotForm SupportReplied on January 24, 2018 at 9: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".
It should look like this after:
I hope this helps. If you have other questions, please feel free to contact us anytime.
-
AdminRSCMReplied on February 13, 2018 at 9:48 AM
I don't see the alternate colors on the dropdown list.
Here is the form: https://form.jotform.com/80433929758166
-
David JotForm Support ManagerReplied 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:
-
AdminRSCMReplied on February 13, 2018 at 12:46 PM
where is the cloned form?
-
David JotForm Support ManagerReplied on February 13, 2018 at 1:01 PM
I cloned the last form example you shared, here it is: https://form.jotform.com/80434039226957
-
AdminRSCMReplied 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
-
David JotForm Support ManagerReplied 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:
Firefox:
IE:
-
AdminRSCMReplied 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?
-
David JotForm Support ManagerReplied 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;
}
}
-
AdminRSCMReplied on February 14, 2018 at 1:53 PM
-
jonathanReplied on February 14, 2018 at 3:09 PM
We will resolve the next question on another thread here https://www.jotform.com/answers/1384668
Thanks.