Payment Field: Change the font color on the quantity selector

Hello,

Can you tell me how to change the font on the quantity selector on my form? I asked this before and cannot find the response to fix it, therefore I am asking again.

The attached screenshot shows the issue. The 2nd quantity number is not showing as it is in 'WHITE" font. I need to change it to black.

Thank you.

Hi wattschapel,

Thanks for reaching out to Jotform Support. Sure, you can use a custom CSS code to change the font on the quantity selector of your Payment field. Here's how:

1. First, copy this code:

select#input_25_quantity_1001_0 {

  color: black !important; 

  

}

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.

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

Here's the result:

Give it a try and reach out again if you have any other questions.

Thank you so much for your response.

Now however, the font for the FIRST PAYMENT option is not showing. The 2nd one is, the 1st one is not. I have tried to copy and paste the CSS Code and it is only working for one of the payment quantities, not both as I need it to.

Hi wattschapel,

You can try adding this code instead:

.form-textbox {

  color : #353839;

}



select#input_25_quantity_1001_0 {

  color: black !important;  

}

Here's the result:

Give it a try and let us know if you need any help.

It is still not working.

I cannot see the Quantity on the "Veterans" nor the amounts on the quantity drop downs for either line.

I am working on yet another form and the same issue is happening. This is very frustrating as I am copying and pasting the CSS code sent and it is not working.

Hi wattschapel,

I've cleared your form caches; your forms are now refreshed. You can use the following CSS code for the dropdown options in your product list.

First, copy the CSS code below:

select[id*="quantity"] { color: black !important;}

.form-textbox {color: #353839 !important;}

Now, let's insert the code:

1. In the Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. Now, in the Form Designer menu, click on the Styles tab, scroll down.
3. Delete the previous code, and paste this code into the Inject CSS Code box. Close the panel. That’s it. The code is automatically saved.

This CSS uses an attribute selector to apply the black font color to all quantity dropdowns that have quantity in their IDs, which should cover all your payment quantity selectors regardless of their specific IDs.

If you still experience issues, you can try again after clearing your Google Chrome web browser's caches. Do note that when you clear your web browser caches; you will be automatically logged out from many websites. You can also use the another web-browser such as Mozilla Firefox or Microsoft Edge for the testing.

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