What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to I get the text color in dropdown field to match the text fields?

    Asked by netruck on March 06, 2016 at 09:50 AM
    3) How do I get the text color on both the drop down and text fields to match? My drop-downs are darker colored than the text fields
    dropdown field text color
  • Profile Image
    JotForm Support

    Answered by Welvin on March 06, 2016 at 10:14 AM

    I think you mean to change the empty option text color?  If yes, you can inject the following custom CSS codes to match it with your textbox field placeholders:

    select {

        color : #ABA9B6 !important;

    }

    option:not(:checked) {

        color : #000 !important;

    }

    Here's the guide again on how to inject the custom CSS codes: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. Please add it to the bottom. You can also add the codes in the CSS tab when you are in the form designer.

     

  • Profile Image

    Answered by netruck on March 10, 2016 at 04:35 PM

    Awesome!  Thank you!

    I noticed that the drop down text is "smaller" than the rest.  Can you please tell me how to increase this to match the text?

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on March 10, 2016 at 05:56 PM

    For the Dropdown list text font-size, you can try this CSS codes

    .form-dropdown option {

        font-size: 14px!important;

        font-weight: normal!important;

    }

     

    Just change the font-size px value to what you prefer.

    Let us know if this did not work.

  • Profile Image

    Answered by netruck on March 17, 2016 at 11:06 AM

    I tried adding:  

    .form-dropdown option {

        font-size: 14px!important;

        font-weight: normal!important;

    }

    And it didn't work

  • Profile Image
    JotForm Support

    Answered by mert on March 17, 2016 at 12:05 PM

    Hi there,

    It looks like my colleague's CSS code is working on the Firefox only. When I tested on the Chrome, I replicate the same result with you. Please, try to add the same CSS code in "select" tag, just like the following:

     

    select {

        font-size: 14px!important;

        font-weight: normal!important;

     

    }

     

    Please, try this one and let us know the results.

    Regards.

  • Profile Image

    Answered by netruck on April 07, 2016 at 10:44 AM

    This works great but after the user selects an option from the dropdown - the selection displays in gray while the contents of my completed text boxes are black.

    How can I get the chosen option in my dropdown to be black?

  • Profile Image
    JotForm Support

    Answered by david on April 07, 2016 at 12:22 PM

    The select attribute sets the color for the option displayed.  Currently, it is set to grey via this code:

    select {

        color : #ABA9B6 !important;

    }

    Changing this from to

    select {

        color : black !important;

    }

    Would show the selected option black.

    https://form.jotform.com/60974884289981

  • Profile Image

    Answered by netruck on April 07, 2016 at 09:10 PM

    Whats the easiest way to get everything to stay consistent in color?  After doing that my dropdown boxes have back text  - but my text boxes text (Hint Example) is gray.

    I would like everything one color whethers it's black or gray.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 07, 2016 at 10:36 PM

    You can also change the Hint text color to black using the same CSS method.

    But wouldn't it be inconsistent if the Hint text is similar color to the actual input text? 

    The end-user might confuse the hint text as the value (there were cases like this)

    Anyhow, you can try adding this CSS code to change your form Hint texts color to black

     

    *:-moz-placeholder {

        color: #000;

    }

    *::-moz-placeholder {

        color: #000;

    }

    *:-ms-input-placeholder {

        color: #000;

    }

     

    Hope this help. Let us know if you need further assistance.

  • Profile Image

    Answered by netruck on April 08, 2016 at 09:09 AM

    Thank you - you have a valid point.

    Based off the design of the form - what do you suggest for colors and input?  

    I like the gray for the hint text - but the drop-downs were black.  I would like to get everything to look uniform

    Thank you!

  • Profile Image
    JotForm Support

    Answered by mert on April 08, 2016 at 09:40 AM

    On behalf of my colleague, you are most welcome. If we come to your question, we are not expert on this subject; but if you are asking, the placeholders' font-weight could be set as "bold" and you can choose a color (#655f5f) closer to the grey on the hints. Because, you want to hold the integrity.

    Please, see the code that makes the necessary changes:

     

    select {

        font-weight: bold;

        color: #655f5f !important;

    }

     

    Also, the final look can be seen from the below:

     

    Please, do let us know your thoughts about this one.

    Regards.

  • Profile Image

    Answered by netruck on April 08, 2016 at 10:20 AM

    I guess - I'm confused... 

    Is there a way to make both the text fields and drop-downs to look the same when the user hasn't typed in them?

    Then make them look the same when they are completed?

    I tried playing around with the colors in the code that Jonathan provided but it didn't do anything.

    *:-moz-placeholder {

        color: #000;

    }

    *::-moz-placeholder {

        color: #000;

    }

    *:-ms-input-placeholder {

        color: #000;

    } 

  • Profile Image
    JotForm Support

    Answered by mert on April 08, 2016 at 10:40 AM

    To change the both of them, you need to use the following CSS code from the below. As it is seen, blue marked areas are controlling the color of both input hints' and dropdown placeholders'. To take attention, I set them as red; but you can change it.

     

    select {

        font-weight: bold;

        color: red !important;

    }

     

    input::-webkit-input-placeholder {

    color: red !important;

    }

      

    input::-moz-placeholder { 

    color: red !important;  

    }

     

    input:-ms-input-placeholder {  

    color: red !important;  

    }

     

    See the results from the below:

     

    Please, do let us know the results.

    Regards.

  • Profile Image

    Answered by netruck on April 08, 2016 at 10:57 AM

    Thank you what would be the script for the Text Area?

  • Profile Image
    JotForm Support

    Answered by mert on April 08, 2016 at 11:00 AM

    You are most welcome. The following ones for the text-area. They are three rules, because they are affecting different browser types. Please, check it from the below:

     

    input::-webkit-input-placeholder {

    color: red !important;

    }

      

    input::-moz-placeholder { 

    color: red !important;  

    }

     

    input:-ms-input-placeholder {  

    color: red !important;  

    }

  • Profile Image

    Answered by netruck on April 08, 2016 at 11:09 AM

    Thank you for your prompt reply This appears to be the same as the text fields.. It turned them red - but the text area is still gray.

  • Profile Image
    JotForm Support

    Answered by mert on April 08, 2016 at 11:14 AM

    Sorry for the misunderstanding from the previous post. We can also change the color for the text-area. Please, see it from the below:

     

    .form-custom-hint {

        color: red !important;

    }