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

    Changing the highlight color

    Asked by fitoutlab on March 01, 2016 at 10:37 AM

    Once I have created my form when I select the field it shows as a pale yellow highlight box outside the field and then a blue outline and then a thin orange outline in the inner box. It also does this when clicking the submit button. I would like to change these colours to grays and have checked through designer but can't seem to find where these colours are allocated?

    Screenshot
    editable find checked select then
  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 01, 2016 at 12:03 PM

    This is the CSS to change the background color:

    .form-line-active{

        background:#FFFFFF;

    }

    Currently it is white, but just replace the color with the one that you need and inject it following this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Do let us know how it goes. 

  • Profile Image

    Answered by fitoutlab on March 01, 2016 at 08:08 PM

    Thanks for your quick response Kevin. Although I am not talking about the background colour (which I am happy to leave as white) I am referring to the highlight colour around the email field which is appearing as a pale yellow (refer screenshot). Also the highlight line around the email field is showing as a blue and orange line. I would like to change these to greys.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 01, 2016 at 09:58 PM

    Yes, that is the code to change the highlight color, use this code to change the highlight color as well as the border color: 

    .form-line-active input:focus{

        border:1px solid gay !important;

    }

    .form-line-active{

        background:gray;

    }

     

    Inject it and you will see that it will change its background to gray color, form-line-active is the CSS class that is applied to the field when you click on it.

  • Profile Image

    Answered by fitoutlab on March 02, 2016 at 12:49 AM

    Thanks again, but it didn't seem to work? I played around with the colour input as "solid gay !important" seemed like it might be an error? But still not working :/

    I am appreciating your help with this!

  • Profile Image
    JotForm Support

    Answered by Jan on March 02, 2016 at 07:24 AM

    Please remove this CSS code:

    .form-line-active {
    background : gray;

    }

     

    Replace it with these CSS codes:

    .form-line-active {
    background-color: gray !important;
    }

    .form-line.form-line-active {
    background-color: gray !important;
    }

    Please take note that you can change the color if you like. You can use hex colors if you prefer.

    If you need further assistance, let us know. Thank you.

  • Profile Image
    JotForm Support

    Answered by Jan on March 02, 2016 at 07:37 AM

    I've found out that there is a blue border line in the box if it is selected, it is the outline-color selector that does that. Please add this CSS Code:

    .form-line-active input:focus {
    border : 1px solid gray !important;
    outline-color : gray !important;
    }

    Hope that helps. Thank you.

  • Profile Image

    Answered by smoketree on September 11, 2016 at 04:03 PM

    I was having this same issue. The last solution worked on my 'text box', but my 'text area' still highlights with blue.
  • Profile Image

    Answered by Irshad on September 11, 2016 at 04:28 PM

    @smoketree, Can you please send us your form id, in which you are facing the issue.

    We will be glad to assist you.

    Thanks.

  • Profile Image

    Answered by smoketree on September 11, 2016 at 04:49 PM

    62545199515968

  • Profile Image
    JotForm Support

    Answered by jonathan on September 11, 2016 at 05:02 PM

    @smoketree

    We will resolve your issue here https://www.jotform.com/answers/929537