Validation error CSS

Good morning, how do I set a custom style for the validation of the fields in the checkout billing address page?

I wish the unvalidated fields present a red border.

Thank you.
Vincenzo Di Modugno

Bagarozzo wrote:
They get assigned a class of input-validation-error so this should do it:

input.input-validation-error {
    border-color: red;
}

If you want them to stay red when focused then you might want to also add a focus pseudo selector:

input.input-validation-error,
input.input-validation-error:focus {
    border-color: red;
}

Thank you very much.

Locally with the original theme it works perfectly, but when I make the same change in our demo environment with the theme "Pavillon" of "nopTemplate" does not work.

Add the css rule either way in "styles.css" file under the theme directory.

Below is an extract html of a field on the checkout page:

<div class="inputs">
        <label for="NewAddress_FirstName">Nome:</label>
        <input class="text-box single-line input-validation-error" data-val="true" data-val-required="Il nome è obbligatorio" id="NewAddress_FirstName" name="NewAddress.FirstName" value="Vincenzo" type="text">
        <span class="required">*</span>
        <span class="field-validation-error" data-valmsg-for="NewAddress.FirstName" data-valmsg-replace="true"><span for="NewAddress_FirstName" class="">Il nome è obbligatorio</span></span>
    </div>

petemitch wrote:


It does not really work if you add the code with the instruction :focus.

Putting only the first statement works well.

thanks.
Vincenzo