How to create HTML error message checking HTML form using CSS?

Question

How do I create CSS5 form validation error messages using CSS?

Answer 1

There is currently no way to customize these little tips for verification. The only other option I decided to make is to disable browser checking all together and now rely on my own client-side verification scripts.

According to this article: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

"The easiest way to opt out is to add the novalidate attribute to your <form> . You can also set formnovalidate in submit controls."

Answer 2

Chrome provides a natural look for its error checking speech bubbles. The error bubble consists of four elements that are not normative elements. These four elements are styled using pseudo-elements that apply to individual sections of the bubble:

 ::-webkit-validation-bubble ::-webkit-validation-bubble-arrow-clipper ::-webkit-validation-bubble-arrow ::-webkit-validation-bubble-message 

---

Update: This method has been deprecated.

Answer 3

Use a pseudo selector as easwee said. For example, to make a form element green when it is valid and red to be invalid, follow these steps:

 :invalid { background: #ffdddd; } :valid{ background:#ddffdd; } 

If you need a full link to them, go to the link to Mozilla.

PS Sorry, if I do these answers incorrectly, I am new to this community.

Answer 4

The required field will be invalid until the correct entry is entered. A field that is not required but has validation, such as a URL field, will be valid until you enter text.

  input:invalid { border:solid red; } 

for more information http://msdn.microsoft.com/en-us/library/ie/hh772367 (v = vs .85) .aspx

Answer 5

For Google Chrome, it’s no longer possible to style validation messages: https://code.google.com/p/chromium/issues/detail?id=259050