I change the background color in dropdown box?

  • Profile Image
    cefwicgross
    Asked on February 01, 2017 at 04: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. 

  • Profile Image
    BDAVID
    Answered on February 01, 2017 at 04: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.

  • Profile Image
    cefwicgross
    Answered on February 01, 2017 at 04:45 PM
    this is the form I am working with
    https://form.jotform.com/70316337061145
    the dropdown box is above the map
    ...
  • Profile Image
    BDAVID
    Answered on February 01, 2017 at 05:12 PM

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

    If that is the case, inject the following code:

    .form-dropdown option {

        background: "any color you want to";

    }

    Example:

    .form-dropdown option {

        background: blue;

     

    }

    Result:

    Let us know if you need more help.

  • Profile Image
    cefwicgross
    Answered on February 01, 2017 at 05: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


    ...
  • Profile Image
    BDAVID
    Answered on February 01, 2017 at 06: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:

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

    Let us know if you need more help.

  • Profile Image
    cefwicgross
    Answered on February 01, 2017 at 06:46 PM
    Is there a way to change the color of the font?



    ...
  • Profile Image
    BDAVID
    Answered on February 01, 2017 at 08:41 PM

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

  • Profile Image
    BDAVID
    Answered on February 01, 2017 at 08: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:

  • Profile Image
    cefwicgross
    Answered on February 01, 2017 at 08: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?
    ...
  • Profile Image
    cefwicgross
    Answered on February 01, 2017 at 09: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;} ?
    ...
  • Profile Image
    cefwicgross
    Answered on February 01, 2017 at 09:45 PM
    think I've got it working -- thanks
    ...
  • Profile Image
    TitusNdoka
    Answered on February 02, 2017 at 01:16 AM

    Your welcome. My colleagues got your response.