How can I change the colors for AutoFill Widget Dropdown?

  • SubZeroSW
    Asked on April 17, 2024 at 7:57 PM

    The drop down for the Autofill widget is light with a white lettering. How can I change it the WHITE BACKGROUND with BLACK LETTERS?

    Jotform Thread 14003621 Screenshot
  • shakilabbasi
    Replied on April 17, 2024 at 9:16 PM

    Hi SubZeroSW,

    Hope you are doing well ! I tried to replicate it and the default setting are showing Black Letters on my end. I think you have made some customisation changes on the form.

    Below are the steps you can take to change the fonts and background colour:

    1. You can see the Paint brush icon on the right side of your Form Builder screen
    2. Under the COLORS tab, change the font colour and input background colour.

    How can I change the colors for AutoFill Widget Dropdown? Image 1 Screenshot 30

    How can I change the colors for AutoFill Widget Dropdown? Image 2 Screenshot 41

    OR

    Switch to the STYLES tab, go to the CSS section and then paste the below code and if it works for you.

    background-color: white ;

    }

    .form-autocomplete-list-item {

    color: black

    I hope this helps.
    Thanks.

  • Raymond JotForm Support
    Replied on April 17, 2024 at 11:39 PM

    Hi SubZeroSW,

    Thanks for reaching out to Jotform Support. We can customize your list by applying some CSS codes to your form. Let me show you how to do that:

    • In Form Builder, click on the Paint Roller icon on the right.
    • Under the Styles tab, and paste the following codes into the CSS box.
    /* customize autocomplete - 14003621*/
    .form-autocomplete-list {
     background-color: white !important;
    }
    .form-autocomplete-list-item {
    color: black !important;
    text-shadow: none;
    }
    /* Ends here */

    How can I change the colors for AutoFill Widget Dropdown? Image 1 Screenshot 20

    Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

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

 
Your Answer