I change the background color in dropdown box?

  • cefwicgross
    Asked on February 1, 2017 at 4:01 PM

    I've check in the forum several times on how to do something and it seems the instructions seem to be connected to a different version.  for example I asked the question how can I change the background color in dropdown box?  the forum show a toolbar that I don't see available on my form.  I don't see any place where I can change background color of the box.   currently when someone makes a choice it is white print on white background. 

    Jotform Thread 1053904 Screenshot
  • David JotForm Support Manager
    Replied on February 1, 2017 at 4:25 PM

    We just launched the JotForm version 4, that is why the guides are still in v3. On regards of changing the background of an specific field, such as a dropdown, that can be accomplished through CSS injection. 

    Please let us know what is the form you are referring to, and the field you want to change it's background color, and we will be glad to give you the instructions for the v4.

  • cefwicgross
    Replied on February 1, 2017 at 4:45 PM
    this is the form I am working with
    https://form.jotform.com/70316337061145
    the dropdown box is above the map
    ...
  • David JotForm Support Manager
    Replied on February 1, 2017 at 5:12 PM

    I believe you are referring to changing the brown background for the options list:

    I change the background color in dropdown box? Image 1 Screenshot 40

    If that is the case, inject the following code:

    .form-dropdown option {

        background: "any color you want to";

    }

    Example:

    .form-dropdown option {

        background: blue;

     

    }

    I change the background color in dropdown box? Image 2 Screenshot 51

    Result:

    I change the background color in dropdown box? Image 3 Screenshot 62

    Let us know if you need more help.

  • cefwicgross
    Replied on February 1, 2017 at 5:45 PM
    Actually I am look at when a person tries to complete the form and it looks like this although I’ve click on one of the choices, it can’t be seen in the box. Also you mentioned about putting it as a ccs injection where do I find that box? Under general – there is question text, label alignment, required and duplicate question
    Under options width, options, predefined options, show text in empty option
    Surveying tab has multiple selections, visible options, calculation values
    Advanced – selected by default, hover text, shrink and hide field

    When I went to form designer I was able to change the background for others questions (see church website), but it didn’t change for the dropdown box.

    thanks


    ...
  • David JotForm Support Manager
    Replied on February 1, 2017 at 6:03 PM

    I see what you mean, to change the background of the box that shows the option selected, inject this code to test:

    .form-dropdown{

        background: blue;

    }

    Note, you can use any color you want to: http://www.w3schools.com/cssref/css_colors.asp 

    On regards of where to inject custom CSS code, follow these instructions:

    1) Click on the design icon:

    I change the background color in dropdown box? Image 1 Screenshot 30

    2) The click on the CSS tab, and paste the code in the Inject Custom CSS area:

    I change the background color in dropdown box? Image 2 Screenshot 41

    Let us know if you need more help.

  • cefwicgross
    Replied on February 1, 2017 at 6:46 PM
    Is there a way to change the color of the font?



    ...
  • David JotForm Support Manager
    Replied on February 1, 2017 at 8:41 PM

    Yes, click on the Colors tab, then scroll down to change the font, please check this animated screenshot:

    I change the background color in dropdown box? Image 1 Screenshot 20

  • David JotForm Support Manager
    Replied on February 1, 2017 at 8:45 PM

    If you meant to change the font color of the dropdown option, click on the advanced designer, then click on any of your dropdown fields:

    I change the background color in dropdown box? Image 1 Screenshot 20

  • cefwicgross
    Replied on February 1, 2017 at 8:45 PM
    this changes the dropdown box, but not the area where it shows what is
    being selected. can a person change the color of the font in the
    dropdown box?
    ...
  • cefwicgross
    Replied on February 1, 2017 at 9:45 PM
    sorry I didn't read it closely - yes it does change the background color
    in the response box - thanks
    would be interested as well in whether the color of the text can be change
    (from white). I clicked on the color selection and it is very helpful,
    and see where a person can change the style, and font, but don't see which
    option would give the color, do I just write the color as list ie
    .form-dropbox{font:blue;} ?
    ...
  • cefwicgross
    Replied on February 1, 2017 at 9:45 PM
    think I've got it working -- thanks
    ...
  • TitusNdoka JotForm Developer
    Replied on February 2, 2017 at 1:16 AM

    Your welcome. My colleagues got your response.