- guineapigmeAsked on March 08, 2015 at 04:44 PM
In my configurable list, I would like my drop down items to have different colors in the back ground and/or in the text field adjacent to it so that the category is easily determinable visually
I would like those fields to retain their formatting after the color selection.
I currently have country, highland, music, break, and narration and so need color codings for these.
- JotForm SupportjonathanAnswered on March 08, 2015 at 07:03 PM
You can use a CSS code to change the background of background option similar to the discussion here:
So it becomes like this:
I think there is no means to dynamically change also the background-color for the selected option base on the color highlight of the selected option.
But I will consult from colleagues if they have solution for that.
We will let you know here.
- guineapigmeAnswered on March 08, 2015 at 07:51 PM
Added the code, but do not see it taking effect.
- CharlieAnswered on March 09, 2015 at 02:22 AM
Upon checking your form, it seems that you are missing some "}" in your custom CSS code.
Regarding the changing of background color for the selected option, we're still looking for a workaround for it, but if you want to have it one color only and not changing dynamically, you can do that by using this code:
background: insert color here;
I hope this helps.
- guineapigmeAnswered on March 09, 2015 at 10:52 AM
I added the missing brackets, but still cannot see the change.
So if I understand you clearly, there is no way, based on the drop down field selection to change the color of the font of the selected option, nor the background?
Is there a way to select different fonts for the drop down menu? I am looking for a way to be able to easily pick out the different categories after selection.
That is, upon selecting option A, I cannot make the drop down selection text nor any other field's text nor background change color?
- CharlieAnswered on March 09, 2015 at 11:37 AM
I'm not sure though if I understand it correctly. If you are asking to change it dynamically based from the selection, that is possible probably is you are using the form's full source code and edit it directly.
If you would just like to change the background and font color for the selected option, that is possible by adding this code:
So basically the selected option will be in white font and pink background color. You can check the changes I've made in this cloned form: http://form.jotformpro.com/form/50674258580966.
I hope this helps.
- guineapigmeAnswered on March 09, 2015 at 11:50 AM
I'm afraid that wasn't what I was looking for unfortunately. I am also confused as to why my CSS additions of before aren't working for me.
- JotForm SupportEltonCrisAnswered on March 09, 2015 at 01:05 PM
This is what I see in your form config list drop down as of this writing. It seems working fine with my Chrome, Firefox and IE browsers.
Are you referring to the background of the selected option? If so, my colleague's solution above should work. Just append it on the config list custom CSS box.
You can change the colors to your preference.
Let us know if I have missed something here. Thanks!
- guineapigmeAnswered on March 09, 2015 at 01:16 PM
I see no change at all. I am on Chrome. I don't see it in my preview or in the real version of my form.
- CharlieAnswered on March 09, 2015 at 01:27 PM
You could try cloning our forms instead and see if the changes apply there. Here's a guide on how to clone a form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.
Here is my form URL which you can use to clone: http://form.jotformpro.com/form/50674258580966.
- guineapigmeAnswered on March 09, 2015 at 04:09 PM
Should I see those formatting and color changes in my preview or do I have to see it in the live form?
There is something fundamental in my issues. I have been using this form or a version of it for months and I am unable to change colors and see them. Is there some override that is specific to myself.
I have had such odd things happen in and around the configurable list.
This is very odd and frustrating.
- JotForm SupportjonathanAnswered on March 09, 2015 at 04:53 PM
I have directly applied the custom CSS code we have suggested on your jotform http://www.jotform.us/form/50665745707160
I can see it the custom color happening on the Configurable List widget on your jotform now.
Please let us know if this still did not work.
- guineapigmeAnswered on March 09, 2015 at 05:29 PM
In both the preview and in my editable live version of the form, I see the pink, but not the drop down color changes.
- JotForm SupportjonathanAnswered on March 09, 2015 at 05:56 PM
It was probably just a browser cache issue on your side...
Please try clearing the browser cache and restart browser, and retry previewing the form http://www.jotform.us/form/50665745707160
I tried at least 3x already, it was working every time
Please let us know if still not working.
- guineapigmeAnswered on March 09, 2015 at 06:03 PM
No, ... killed Chrome, restarted. Did hard refresh for Mac
- JotForm SupportjonathanAnswered on March 09, 2015 at 06:39 PM
I understand the frustration..=) This is indeed a weird a issue.
Have you also tried on other browsers? aside Chrome, can you also try with Firefox, Safari or IE browser.. or whichever browser you can at least test (much better if test also on another device/computer)
We will wait for your update.