[css3-ui]? Proposal for ::error pseudoelement

HTML5 defines a system of constraints that can be applied to form
elements, and which prevent the form from being submitted while the
constraints aren't satisfied.  When you try to submit a form with
invalid elements, the UA should display a message informing the user
of which controls are invalid, and why.  Currently Opera is the only
browser which has this functionality.  You can see it in action by
loading the following url in a modern shipping Opera build:
data:text/html;charset=utf-8,%3C!doctype%20html%3E%3Ctitle%3ETest%3C%2Ftitle%3E%3Cform%3E%3Cinput%20required%20name%3Dfoo%3E%3Cinput%20type%3Dsubmit%3E%3C%2Fform%3E

There's currently no way to change the display of the the error
message, but Lachlan reported yesterday that they have received a lot
of feedback that authors want to control this.  The display of the
Opera error messages is pretty simple - it's just a text string in a
box - so this should be fairly easy to spec up.

I propose adding an ::error pseudoelement to the CSS3 UI spec.  You
can style the error message for a specific element by attaching it to
that element, like "input[type=email]::error {}".

With one exception, the ::error pseudoelement is treated exactly like
an abspos box inserted into the markup via scripting.  It accepts all
CSS properties.  The one exception is positioning.  By default, the
::error pseuedoelement is positioned in a UA-defined manner, which may
be impossible to reproduce in ordinary CSS (Opera positions the box
just underneath the offending input).  You can override this by
specifying a different value for position: or left/right/top/bottom.
You can return to the default (possibly magic) values by using
position:absolute and 'auto' on left/right/top/bottom.

~TJ

Received on Tuesday, 25 August 2009 18:33:47 UTC