Proposing a syntax for styling form validation messages

Forms that are validated in HTML5 display a message if errors are found
during validation . Currently these error messages are given default styles
by the browser, but there will be a requirement for developers to over-rule
those styles. Chrome/WebKit have a way to style these messages (
http://trac.webkit.org/wiki/Styling%20Form%20Controls#WebKitr82180orlater)
but their syntax is, in my opinion, not very graceful.

On my blog I've proposed an alternative way to allow this styling, and I'd
appreciate feedback on its practicality from persons more technical than
myself.

The approach I'm thinking of would take the form of a pseudo-element,
perhaps something like:

input::error {}

This would allow us to set background, colour and font options. It may be
necessary to also have a property to set where the validation error message
appears in relation to the input it’s attached to; perhaps modifying
position with values of *above*, *below*, *before*, or *after*:

input::error { position: below; }

 And, perhaps, another property to set the appearance of the box which
contains the message; perhaps the appearance property with values of
*box*for a rectangle, or
*balloon* for the current speech balloon style:

input::error { appearance: balloon; }

There’s also the text inside the validation error; the main message, and an
optional extra which can be set with the title attribute (or JavaScript).
These could have further pseudo-elements for finer control over the text
formatting:

input::error-message { }
input::error-text { }

This is extracted from a fuller post on my blog at
http://www.broken-links.com/2011/03/28/html5-form-validation/.