How do you change the color of a required item?

  • Profile Image
    rsancimino
    Asked on April 13, 2014 at 12:27 AM

    Ok so whenever an item is selected and you don't fill it in although it is required, the hover color of the background is pink. is there a way to change this color to whatever i want?

     

  • Profile Image
    gori-mathew
    Answered on April 13, 2014 at 04:47 AM

    Hello,

    To change your form errors color to any color you wish you need to insert some css into your form using this linked guide.

    Here's some Sample CSS that will change your form errors to a pale green (#C5C531;) when you inject them in your form:

    .form-line-error .form-error-message {
    background: #C5C531;
    }
    .form-error-arrow {
    border-bottom-color: #C5C531;
    }
    .form-line-error input:not(#coupon-input), .form-line-error textarea {
    border: 1px solid #C5C531;
    -moz-box-shadow: 0 0 3px #C5C531;
    -webkit-box-shadow: 0 0 3px #C5C531;
    box-shadow: 0 0 3px #C5C531;
    }

    You can change the color by replacing the hexadecimal value(#C5C531;) on all the rules with a color value you wish, here is a list of all the HTML color codes:

    http://html-color-codes.com/

    Do let us know if you neeed further assistance.

  • Profile Image
    rsancimino
    Answered on April 13, 2014 at 08:35 AM

    Thank you for your reply however, what I am actually looking to change is the background color of the required form not the text. Whenever a required item is not filled in there is pink background color indidicating the field is required. is there anyway to change the background color from pink to whatever color I would like? 

  • Profile Image
    Welvin
    Answered on April 13, 2014 at 10:12 AM

    This is the result of the Custom CSS codes that is given my by colleague, it is applied to the "This field is required." message background:

    Is this NOT what you want to change? How about this:

     

    If you want to change the overall form line error background, use the following codes:

    .form-line-error {

    background: #9DE08D;

    }

    Change #9DE08D to any colors you want. Same guide for injecting the codes to your form: How-to-Inject-Custom-CSS-Codes

     

    Thanks

  • Profile Image
    rsancimino
    Answered on April 13, 2014 at 10:26 AM

    Thank you so much! Yes, this is exactly what I was looking for. I am going to use both as they both work well together.

  • Profile Image
    koko801
    Answered on April 13, 2014 at 10:46 AM

    thanks