How to disable the Yellow Highlight Effect on a form?

  • Profile Image
    LeascoAuto
    Asked on August 20, 2011 at 02:55 AM

     

    There are some things I'd like to see corrected/adjusted before embedding the HTML on my new website:

    The field highlights on this form are "yellow" is there any way to change this? I would prefer the colors to be more on line with my corporate colors (black, gray, white and red). Yellow just looks so, blah.

    Thanks.

    LAR

  • Profile Image
    NeilVicente
    Answered on August 20, 2011 at 04:11 AM

    Hi,

    This yellow highlight that you are talking about is imposed by the browser Google Chrome.

    In Safari, it's blue:

    In Firefox and IE, there is no highlight color:

    You may inject this css code to change the color of the outline border:

    input:focus, select:focus, textarea:focus
    {
    border: 1px solid red;
    box-shadow: 0 0 2px red;
    }

    However, it will only work for Firefox and, to an extent, Chrome and Safari. Test it out for yourself to see what I mean.

    If you're going after a uniform look across all browsers, you can just have this outline removed by injecting this css:

    input:focus, select:focus, textarea:focus
    {
    outline:none;
    }

     

    Neil

  • Profile Image
    LeascoAuto
    Answered on August 20, 2011 at 08:06 PM

    Neil,

    I'm not quite sure that we are speaking of the same issue. In "Preferences", under "Field Styles", it indicates there is a highlight effect "yellow background effect on focused inputs". I would like to change this highlight effect from "yellow to "red" (#B20000).

    Is this possible? If so, please advise.

    Thanks again.

    LAR

  • Profile Image
    abajan
    Answered on August 20, 2011 at 11:16 PM

    Hi

    Please inject the following CSS, changing the colors to suit:

    .form-line-active {
    background-color: #B20000;
    }

    If the chosen background color makes the text of the labels hard to read, a color will also need to be declared to override the gray (specifically, #333) defined in the main stylesheet:

    .form-line-active {
    background-color: #B20000;
    color: #FFF;
    }

    The color of the sublabels can also be changed on focus. Have a look at this form which has the following injected CSS:

    .form-line-active {
    background-color: #B20000;
    color: #FFF;
    }
    .form-line-active .form-sub-label {
    color: #FFF;
    }

    If you need additional information on this or any other issue relating to your forms, please let us know. The team is always ready to offer assistance to our users.

    Thanks.


    ~ Wayne

  • Profile Image
    ginesis
    Answered on January 18, 2013 at 01:05 PM

    Hi,

    Background-color and fields ok, but is there a way to change the options radio buttons color when form-line-active?

    Thanks

  • Profile Image
    jeanettebmz
    Answered on January 18, 2013 at 02:11 PM

    @ginesis

    There is a way to disable the highlight effect for all the fields

    1. Click on Setup&Embed

    2. Clcik on Preferences

    3. Go to Field Styles Tab

    4. Look for the Highlight option and change it to Disabled

  • Profile Image
    ginesis
    Answered on January 18, 2013 at 04:05 PM

    sorry but this wasn't my question.

    I Would like change the OPTIONS buttons radio COLOR.

    Thanks jotform support

  • Profile Image
    jeanettebmz
    Answered on January 18, 2013 at 04:20 PM

    @ginesis

    Can you please open a separate thread for your specific request and provide us with the form URL?