Changing the color of the field highlight when active

  • Profile Image
    Ralf_CT
    Asked on February 17, 2017 at 01:27 PM
    The background changes to white when filling in some questions.
    White on white makes it difficult to see the question (see attached);
  • Profile Image
    Jan
    Answered on February 17, 2017 at 01: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.

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

    Hope that helps. Thank you.

  • Profile Image
    Ralf_CT
    Answered 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
    ...
  • Profile Image
    Jim_R
    Answered on February 18, 2017 at 07: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:

    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.

  • Profile Image
    Ralf_CT
    Answered on February 18, 2017 at 08: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
    ...
  • Profile Image
    Ralf_CT
    Answered on February 18, 2017 at 09: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
    ...
  • Profile Image
    Jim_R
    Answered 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.

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

  • Profile Image
    Ralf_CT
    Answered on February 19, 2017 at 03: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
    ...
  • Profile Image
    Ralf_CT
    Answered on February 20, 2017 at 01: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
    ...
  • Profile Image
    Ian
    Answered on February 20, 2017 at 03: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.