How to change the font color in the dropdown field and remove the border color of the submit button?

Hi,

I need help with a form because the entry text the clients fills appears con white and is very difficult to read. Also the dropdown questions the options appear the text white and is impossible to see the options. And last the Submit button appears weird with a thick black border.

Jotform:

https://form.jotform.com/202586162118150

Hi MathMindsPR,

Thanks for reaching out to Jotform Support. You can change the font color of the dropdown field by Injecting a CSS Code. Let me show you how:

1. In Form Builder, click the Paint Roller icon on the upper right side of the panel.
2. Go to the Style tab and Paste this CSS Code in the Inject Custom CSS input box.

#input_19, #id_22 select.form-dropdown {

  color : #000000;

  background-color : #FFFFFF;

  border-color : #000000;

}

Check out the screencast of the result below:

Also, you can remove the black border in the submit button by Injecting this CSS Code.

[data-css-selector="id_67"] button.form-submit-button {

  border-color : none !important;

}

Check out the screencast of the result below:

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

Thanks! But how can I eliminate the thick border of the Submit Button, and just keep it like this one.

Also, I need to change the background of the input to white so the input text can be black. How can I do that?

Hi MathMindsPR,

We should be able to update the submit button based on your preference by injecting a custom CSS code. Let me show you how:

1. First, copy this code:

.formFooter-button, .submit-button {

  background-color: white !important;

  border-color: black !important;

  color: black;

}

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.

4. Note that you can change the color based on your preference.

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

Is not working at all!

Hi MathMindsPR,

Replace the code that I provided with the update custom CSS code below. Follow the same steps that was previously provided so that it can be injected into your form.

.formFooter-button, .submit-button {

 background-color: white !important;

 border-color: black !important;

 color: black;

 border-radius: 0px; /* This removes the rounded corners and makes it rectangular */

 padding: 10px 20px; /* Adjust padding to control the button size */

}

Check the results on the screencast below:

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