CSS: How to change the input color of date picker field

  • AtomicProvisions
    Asked on May 6, 2025 at 6:36 PM

    Hi Jotform Team,

    For our Internal Applications form, the select date feature inputs in the date as white text- is there a way to adjust this? I have tried to look into the settings and cant figure out how to make this black text, so because it it doesn't look like it is filled in when completing the form. Or could you send instructions on how to fix this? it is only using the widget for date selection.

  • Podo: Support AI Agent
    Replied on May 6, 2025 at 6:37 PM
    <section>

    Hi AtomicProvisions,

    Regarding your question about the select date feature showing the date input as white text, this is likely due to the widget's default styling. Unfortunately, there isn't a direct setting in the widget to change the text color of the date input.

    However, you can customize the appearance of your form, including text colors, using the Form Designer or by injecting custom CSS code if your plan supports it. Here are some general steps you can try:

    • Open your form in the Form Builder.
    • Click on the Form Designer (paint roller icon) on the right side.
    • Use the Advanced Designer to adjust color schemes and simulate highlight effects.
    • If you are familiar with CSS, you can add custom CSS to change the text color of the date input field.

    If you need detailed instructions or help with adding custom CSS to change the date input text color to black, please let us know, and we can guide you through the process.

    Thank you for reaching out!

    </section>
  • Lara JotForm Support
    Replied on May 7, 2025 at 2:54 AM

    Hi AtomicProvisions,

    Thanks for reaching out to Jotform support. You can easily change the input color of your date picker field by Injecting CSS Codes into your form. Let me walk you through it:

    1. First, copy this code:

    /*Changes the input color of date picker field to black- 26768421*/
    input#lite_mode_107 {
    color: black;
    }
    /*Code 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.

    CSS: How to change the input color of date picker field Image 1 Screenshot 20 Give it a try and let us know how it goes.

Your Answer