Changing the Color on an Input Field

  • Profile Image
    BG247
    Asked on August 18, 2017 at 09:18 AM

    I can't change the color of the INPUT FIELDS. You will see that my form has four input fields. Name, Email, Phone # and Zip Code. I would like to change the color from Black to another color. I believe that I found where to change it in the design center but it does not change on the form? Please help me understand how to change the color. Thanks.

  • Profile Image
    Kevin_G
    Answered on August 18, 2017 at 11:10 AM

    May be that there is any conflict between the form settings style and the style on the theme you have applied; however, you could always add some CSS code to override the settings and set your desired color. 

    Please inject this code in order to change your fields background color: 

    .form-textbox{

        background: #FFFFFF !important;

    }

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    BG247
    Answered on August 21, 2017 at 12:44 PM
    Hello,

    I inserted the code successfully and the fields turned white. This is better than black. I still can’t change the field at all from the editor. This is a small problem but the bigger problem is that the text is white and I can’t change it to another color. You can’t see the any of the letters. The from I am working on is https://form.jotform.com/71004612527951 Feel free to look at the form.

    I would like to be able to change the background of the input area to a different color and
    Change the letters to a different color than white.

    I look forward to your response.

    Best regards,
    Kevin

    Kevin J. Flessner • Managing Director
    AFT Capital Group, Inc. / AFT Networks, LLC
    1826 60th Place East • Bradenton, FL 34203
    www.AFT-NET.com • Kevin@AFT-NET.com
    (888) 471-4046

    INTERNET CONFIDENTIALITY NOTICE & DISCLAIMER:
    Privileged/Confidential Information may be contained in this message. If you are not the addressee indicated in this message (or responsible for delivery of the message to such person), you may not copy or deliver this message to anyone. In such case, you should destroy this message, and notify us immediately. If you or your employer does not consent to Internet email messages of this kind, please advise us immediately. Opinion, conclusions and other information expressed in this message are not given or endorsed by the Firm or Employer unless otherwise indicated by an authorized representative independent of this message. Nothing in this email is presented as an offer to buy, sell or trade securities or a solicitation of an offer to buy an interest in any investment fund.



    ...
  • Profile Image
    Kevin_G
    Answered on August 21, 2017 at 12:52 PM

    With the code I provided above you will be able to change the input background color, you only need to replace the current value there: 

    .form-textbox{

        background: #FFFFFF !important;

    }

    To change the color you only need to add this code "color: #000000 !important;" to the code I gave above, so the final code you should inject will look like this: 

    .form-textbox{

        background: #FFFFFF !important;

        color: #000000 !important;

    }

    You will find more  HTML colors and their codes here: http://htmlcolorcodes.com/ 

    I hope this helps.