When I choose any option in any form I can see the form changes the color (yellow)...How Can I to change that color? thanks

  • Profile Image
    chocolalo
    Asked on January 03, 2012 at 06:39 PM
    Screenshot
  • Profile Image
    abajan
    Answered on January 03, 2012 at 09:22 PM

    To remove the highlighting altogether, go into the form's preferences: Setup & Embed > Preferences > Field Styles > Highlight Effect > Disabled.

    To change the color from the current light yellow to something else, inject the following CSS, substituting the color of your choice:

    .form-line-active {
    background: #F60;
    }

    However, some background colors may not contrast enough with the default color (black) of the fields' labels, rendering them difficult to see. In such instances, an extra declaration in the rule will prove useful:

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

    But then there's still the matter of the sub-labels to consider (like those under the input elements of "Full Name" fields, for example). This requires the addition of a separate rule:

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

    Here's a form with the same CSS.

    Incidentally, shorthand color codes are used above. So, #F60 and #FFF are equivalent to #FF6600 (orange) and #FFFFFF (white) respectively.

    EDIT: Since in this example the color used for labels and sub-labels is the same, the rules can actually be combined as follows:

    .form-line-active,
    .form-line-active
    .form-sub-label {
    background: #F60;
    color: #FFF;