The Dropdown options on the form are barely visible

I have built a form for use by vet clinics to request cremation services.

The form requires the clinic to select the weight of the pet to help determine pricing. Weights are grouped and selectable in a drop down menu called "Cremation type and pet weight"

When I am editing the form or viewing the form in preview mode, I see this (attached).

When I visited the vet clinic, they showed me that the options below Private 0-35 lbs did not appear in the drop down, even though the entire box for teh drop down appeared.

When I investigated the issue using their computer, I noticed a few things:
- the background for the drop down was not grey as in my version, but it was WHITE.
- the dropdown box (white) appeared normally, but appeared to be blank (with the exception of the first item in the list)
- when I hovered my cursor over the white drop down box, the text appeared (but only when I hovered over it)

From this, it appeared to me that the text appearing in the box was WHITE which blended in with the white background of the dropdown box.

Returning to my office, I attempted to confirm/change the background to grey so the letters would appear, but there is no way to modify the background color. This is unusual since MY background color is GREY and theirs is WHITE.

I also determined that there is no way for me to change the text color in the drop down box to contrast with the white background.

Any help would be appreciated.

Hi Robert,

Thanks for reaching out to Jotform Support. Can you share with us a screen recording of what’s happening so we can try to replicate it on our end? You can share the video recording on any public sharing platform like Google Drive or Dropbox, or you can simply use Loom to record the video and share the video link with us.

Once we hear back from you, we'll be able to move forward with a solution.

Thank you, but I can't. It occurred on their computer in the clinic and I don't have access to their computer. It doesn't happen on mine.

To try to replicate it, simply go to
https://form.jotform.com/251646634610152

And scroll down to the cremation type and pet weight (in my screenshot) and interact with the dropdown. If it occurs for you, you've got it. If not, then it's just their computer (for whatever reason).

Hi Robert,

It seems that the issue doesn't happen to the users who use Apple devices due to their unique dropdown style, but in Windows devices it causes the Dropdown field options to be barely visible due to white text and dropdown color. To fix the issue, you can use CSS code to change the color of your Dropdown field text. Check out the screenshot below:

As you can see, the Dropdown options are now very visible because of contrasting colors. Let me show you how to do it:

1. Copy the CSS code below:

/*Change the Dropdown options color*/

.form-dropdown option {

  color: black !important;

}

/*Ends here*/

2. In Form Builder, click on the Paint Roller icon on the upper right side of the page.

3. Click on the Styles tab on the upper right side of the page.
4. In Inject Custom CSS on the right side of the page, paste the CSS code that you've copied earlier.

You can also clone my demo form as a reference. After that, can you ask them to test your form again to see if it's going to work?

As soon as we hear back from you, we can move forward with a solution.

thank you for that code. Do I paste over and replace the code that is already there or simply add to it (starting on line 14)?

Hi Robert,

When injecting custom CSS code on your form, you do not need to replace the existing code unless you want to completely remove or override previous styles. Instead, you should add the new CSS code provided by my colleague below or alongside the existing code. This way, the new styles will apply in addition to any current customizations.

We also have a guide on How to Inject Custom CSS Codes that you can check out.

Give it a try and let us know how it goes.

Thank you!

Hi. Quick update. I just checked on my friends windows computer and the issue is still there. I have attached a screenshot of the issue. Please let me know what you think.

Hi Robert,

I checked the form, and it appears that the CSS code provided by my colleague has not been injected yet. Let me show you how to do it:

1. First, copy this code:

/*Change the Dropdown options color*/

.form-dropdown option {

  color: black !important;

}

/*Ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the result:

We also have a guide on How to Inject Custom CSS Codes that you can check out.

Give it a try and let us know how it goes.

Ah,

I injected the code into the Springhill form, but not the generic clinic form.

Thank you.

Hi Robert,

I've checked your form to confirm if the CSS code is already added to your form, but it's still not added to the Inject Custom CSS field. Check out the screenshot below:

Would you like us to insert the CSS code directly into your form?

Once we hear back from you, we'll be able to help you with this.

Yes. Please help me with this. I'm not sure what I'm missing.

Hi Robert,

I've cleared your form caches; your forms are now refreshed. When I checked out your Clinic - Cremation Request Form 4 on the Google Chrome web-browser, I found that the dropdown field under the Cremation Type was working as expected, and you've successfully injected the CSS code. Let me share the screencast below as a result:

Can you clear your web-browser's caches and then access your form again for checking?

Give it a try and let us know how it goes.