-
CairoFlatsAnswered on June 30, 2021 11:08 PM
Hello JF,
I like the dynamic dropdown widget but it does not automatically suit the colour that the rest of the form has taken and stands out badly. How do I inject some css to change the colour and opacity of this box in order to make it fit in with the rest of the form?
-
Zahra_SAnswered on July 01, 2021 06:13 AM
Hi there,
I checked your forms and couldn't locate the dynamic dropdown widget in any of your forms. Please share the form link and a screenshot of the field you want to customize. We will gladly assist you.
Kindly share the screenshot by following this guide as email attachments are not supported on our forum: https://www.jotform.com/help/438-how-to-post-screenshots-to-our-support-forum.
-
CairoFlatsAnswered on July 01, 2021 07:40 PM
I have attached a photo which shows the difference between a normal dropdown box accepting the whole form colour Vs the dynamic dropdown which defaults to white with no way to change it other than CSS. Any assistance is greatly appreciated.
-
Zahra_SAnswered on July 02, 2021 03:19 AM
Hi there,
To write CSS for this, we need that specific field's ID which can only be possible if you have added this field in your form. Please share your form link in which you have added this field so we could share CSS specifically for your form.
Waiting for your response.
-
CairoFlatsAnswered on July 02, 2021 10:40 PM
Hello Zahra,
Here is the link that you have requested. Your prompt assistance is greatly appreciated.
https://form.jotform.com/211828503707859
-
Zahra_SAnswered on July 03, 2021 01:49 AM
Thank you for sharing this.
Please allow me some time to work on this. I will get back to you soon.
-
Zahra_SAnswered on July 03, 2021 02:38 AM
Please add the following CSS code in the widget:
.selecter .selecter-selected{
background-color: #F5F3EE !important;}
.selecter:hover .selecter-selected{
background-color: #F5F3EE !important;}
.selecter .selecter-item{
background-color: #F5F3EE !important;}
Result:
Complete Guide: How to Inject CSS Codes to Widgets
Here's the form I cloned for testing: https://form.jotform.com/211831481400949. Feel free to test it on your end.
I hope this helps. Please let us know if you need further assistance.
-
CairoFlatsAnswered on July 05, 2021 08:40 PM
Hi Zahra,
Thank you for this code. It works great and is a huge improvement to my form.
Kind regards,
Elliot.