-
MathMindsPRAsked on September 18, 2024 at 1:43 PM
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
-
Joeni JotForm SupportReplied on September 18, 2024 at 2:37 PM
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:
- In Form Builder, click the Paint Roller icon on the upper right side of the panel.
- 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.
-
MathMindsPRReplied on September 18, 2024 at 2:44 PM
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?
-
Paolo JotForm SupportReplied on September 18, 2024 at 3:51 PM
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.
-
MathMindsPRReplied on September 19, 2024 at 12:43 PM
Is not working at all!
-
Paolo JotForm SupportReplied on September 19, 2024 at 1:16 PM
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.