How to change the color of the active field when highlighted?

  • Ralf_CT
    Asked on February 17, 2017 at 1:27 PM
    The background changes to white when filling in some questions.
    White on white makes it difficult to see the question (see attached);
  • Jan
    Replied on February 17, 2017 at 1:59 PM

    Please insert this custom CSS code to make the field highlight transparent:

    .form-line.form-line-active {
    background-color: transparent;
    }

    Here's a guide on how to inject custom CSS in Form Builder V4:

    1. Click the "Form Designer" button at the right.

    How to change the color of the active field when highlighted? Image 1 Screenshot 30

    2. Go to the "CSS" tab and paste the code in the "Inject Custom CSS" box. After that, click the "Save" button.

    How to change the color of the active field when highlighted? Image 2 Screenshot 41

    Hope that helps. Thank you.

  • Ralf_CT
    Replied on February 18, 2017 at 12:46 AM
    Good morning Jan,
    Thank you for all the assistance, I've sorted out most of the issues but
    still get a white-on-white block on questions which require more than
    ...
  • Support_Management Jotform Support
    Replied on February 18, 2017 at 7:28 AM

    Just to confirm, is it still about this form https://www.jotform.com/70463064990560

    If it is, you're probably referring to the ERROR STATE highlight color:

    How to change the color of the active field when highlighted? Image 1 Screenshot 20

    To remove the background color of the error states, inject the following CSS Codes:

    .form-line-error {

        background: none;

    }

    Place it on the same section mentioned by Jan on his earlier reply.

  • Ralf_CT
    Replied on February 18, 2017 at 8:46 AM
    Hi Jim,
    Yes it's still the same form. Thank you, your suggestion sorted the
    problem out.
    The Support at JotForm has been excellent!
    Regards,
    Ralf
    ...
  • Ralf_CT
    Replied on February 18, 2017 at 9:45 AM
    Hi Jim,
    Yes, still the same form.
    The error state highlight colour is sorted, but I still get
    white-on-white in the Captcha block (see attached).
    Also, how to I change the width of the Student Number block (at this
    point entered numbers are longer than the block, making it difficult for
    respondents to double-check if the entire number has been entered
    correctly)?
    Many thanks.
    Regards,
    Ralf
    ...
  • Support_Management Jotform Support
    Replied on February 18, 2017 at 10:44 AM

    To fix the Captcha section, insert these codes:

    #input_44 {

       color: black;

    }

    To change the width of the Student Number field, use these codes:

    #input_23 {

       width: 100px;

    }

    Feel free to adjust the width in px upon your discretion.

  • Ralf_CT
    Replied on February 18, 2017 at 1:45 PM
    Hi Jim,
    The Captcha CSS worked, thank you, but the Student Number field width
    remains the same, no matter what the px.
    Regards,
    Ralf
    ...
  • Jan
    Replied on February 18, 2017 at 4:14 PM

    Please try adding "!important" rule in the CSS value. Here's the CSS code:

    #input_23 {
    width: 100px !important;
    }

    Hope that helps. Thank you.

  • Ralf_CT
    Replied on February 19, 2017 at 3:45 AM
    Hi Jan,
    That worked, thank you! I just saw that the previous yellow highlight
    in the Comments box can also be disabled under Settings/Highlight Effect.
    Regards,
    Ralf
    ...
  • Ralf_CT
    Replied on February 20, 2017 at 1:45 AM
    Good morning,
    Under "Preview Form" I see no options to view on mobile devices, only
    "Fill Form" and "Form URL". Link to form:
    https://form.myjotform.com/70463064990560

    Many thanks.
    Regards,
    Ralf
    ...
  • Ian
    Replied on February 20, 2017 at 3:37 AM

    I had created a separate thread for the new issue at https://www.jotform.com/answers/1070768

    Please follow that thread. Some one from out team would respond to the thread.