How to cutomize background highlights and error descriptions

  • Profile Image
    bellaverite
    Asked on May 31, 2017 at 05:34 PM

    Hi,

     

    I have a few additional questions regarding the Jotform forms.

     

    1) How do I remove the yellow highlighting that appears when completing a section on a online form?

    2) How do you change the required fields * from red to black?

     

    Thank you,

    Jessica

     

  • Profile Image
    jonathan
    Answered on May 31, 2017 at 06:58 PM

    You can use the Advance Designer to customize both style mentioned.

     

     

    To change/remove the background highlight color :

     

    To change *required field color to black inject this CSS codes

    span.form-required {  

      color:black;

    }

     

     

    Let us know if you need further assistance.

     

     

  • Profile Image
    bellaverite
    Answered on May 31, 2017 at 11:43 PM
    Hi,
    Thank you so much for your reply.
    I have entered the CSS as instructed below, saved and the mandatory fields are still showing as red. Please attached screenshots.
    Trying to figure out what I am missing.
    Thank you,
    Jessica
    [cid:D55C592B-0D63-4669-AAA2-955DDA6A37A9@socal.rr.com][cid:585E73A5-9B84-49D4-98B8-08F11284DC13@socal.rr.com]
    ...
  • Profile Image
    bellaverite
    Answered on May 31, 2017 at 11:43 PM
    I have also, selected the field to not be highlighted and it is still appearing with yellow block?
    [cid:A16E834E-E439-4221-853E-C15E5C78C236@socal.rr.com]
    ...
  • Profile Image
    jonathan
    Answered on June 01, 2017 at 01:03 AM

    The thing about your form is, non of the fields were actually set as *required fields. So you will not be able to see the effect.

     

    I  have injected this CSS codes on your form to force the removal of highlight effect.

    .form-line-active {

        background: none !important;

    }

     

    I suggest you add a *required field also on your form and check again.

    Let us know how it goes.

    Thanks.

     

     

     

  • Profile Image
    bellaverite
    Answered on June 01, 2017 at 02:43 AM
    Thank you again for your reply. Those issues seem to be fixed but now the fields are showing with a blue and yellow boarder.
    I read the discussion boards and it suggested to use the code shown in screen shots below but it did not work and only worsened the issue.
    Can you please provide the corrected code for no outline or a black boarder?
    Thank you again,
    Jessica
    [cid:67780950-FEED-4CFC-B1DD-63B92CEBBF9A@socal.rr.com]
    ...
  • Profile Image
    BJoanna
    Answered on June 01, 2017 at 03:21 AM

    I have inspect your form, but I am not sure which border do you want to remove. 

    Your screenshot is not shown here on forum. Please note that images that are attached inside of email, will not be shown here on forum. You will need to open this thread and upload your screenshot.

    Looking forward to your reply. 

  • Profile Image
    BJoanna
    Answered on June 01, 2017 at 03:45 AM

    Do you want to remove this blue and yellow border? 

    If so add this CSS code to your form:

    .form-line-active input:focus{

    outline: none!important;

    border:1px solid #cccccc;

    }

    .form-line-active textarea:focus{

    outline: none!important;

    border:1px solid #cccccc;

    }

    Here is my demo form: https://form.jotformpro.com/71511169557964 

    Let us know if you need further assistance.