How to change Form field Highlight color?

  • Maynard_Ryan
    Asked on September 15, 2024 at 12:01 AM
  • Wilson JotForm Support
    Replied on September 15, 2024 at 8:26 AM

    Hi Ryan,

    Thanks for reaching out to Jotform Support. You can use this CSS code below to change the highlight color of your form, you can change the code color to the color that you prefer.

    /* Change the highlight color - Ticket #5561254 */
    .form-line-active, .form-line.form-line-active {
    background-color:rgba(15,231,143,0.12)!important;
    }
    /* Ends here */

    Let me show you how to add custom CSS to your form:

    1. In the Form Builder, select the paint roller icon in the upper-right corner.A screenshot of Form Builder with an arrow pointing to the paint roller icon    to open Form Designer Screenshot 52 Screenshot 20 Screenshot 20 Screenshot 20
    2. In the Form Designer panel on the right, go to Styles at the top.A screenshot of Form Builder with an arrow pointing to the Styles tab in the Form Designer pane Screenshot 63 Screenshot 31 Screenshot 31 Screenshot 31
    3. Scroll down to Inject Custom CSS and enter your CSS code in the textarea — all changes are saved automatically.The Inject Custom CSS field in Jotform Form Builder Screenshot 74 Screenshot 42 Screenshot 42 Screenshot 42

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

    Check out the screencast below to see my results:
    How to change Form field Highlight color? Image 1 Screenshot 53

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

Your Answer