Change color of required field error

[kathyfrombauline]

Hi

I have a form with 2 required fields (first name and last name).
When I click the submit button without the fields being completed, a red border appears around
the input boxes. How do I use css to change that color from red to purple?

<input type="text" id="fname" name="fname" size="50" maxlength="60" placeholder="Enter First Name" required="required" />
<input type="text" id="lname" name="lname" size="50" maxlength="60"  placeholder="Enter Last Name" required="required"  />

[Gandalf]

AFAIK it’s not possible. It is a function of the browser that is not styleable. I’m sure someone will correct me if I’m wrong…

In Chrome, the border is a light blue.

[dresden_phoenix]

javascript. when the specific element loses focus or, if you prefer , when the form is submitted, the .js validates the value of the field. if the value fails validation, then an error class is added. if it fails, the class is removed ( if it want there to begin with it doesn’t matter) . This is probably useful because the .js can prevent the form from submitting as well and thus keep valid info from being sent to the DB.

Note, without submitting the form and for modern browsers, and assuming you are only implementing basic type validation, you could use :invalid {...your style...}

hope that helps