Validation styling

Constraint validation rules are widely supported in browsers with the default behaviour to show an error form submission.

There was prefixed rules in Mozilla and Chrome to impact these however there appears to be no approach to standardise the appearance of these validation messages. I’m struggling to find enough resource to suggest how browsers should actually show the messages, perhaps it is just a convention.

Would it make sense to allow the CSS author to use the newly resurrected appearance property to remove user agent styles and mint a new pseudo element?

input::validation-message {
  appearance: none;
  border: 1px solid orange;
  border-radius: 50%;
  padding: 1rem;
  font-weight: bold;
}

Further resources:

• MDN constraint validation overview
• Constraint validation spec
• Appearance property
• Validation message blink improvement bug

In general styling of form controls is not standardized since nobody is super clear on how it should be solved. It is one of the bigger recurring problems. http://dev.w3.org/csswg/css-forms/ has some thoughts on the matter.

Yeah certainly my feeling is that other form features are a lot more complex to standardise.

My other thought is that the browser could expose the native elements under native shadow DOM which would be browser specific but would give the ability to style until the standards catch up.

As replaced elements can’t take advantage of ::after users really need this so that they can style error messages whilst using native browser validation. Adoption of pattern and other HTML5 validation is very low and I think it is because of this.

So :user-error is useful however it doesn’t really help us with getting the error message into the label element for use with ::after, if that were the case then it would be only required to provide a way to hide native errors rather than change their appearance.

label:has(:user-error) {
  background-color: red;
}

input:user-error::validation-message {
  appearance: none;
  border: 1px solid red;
  content: attr(validationMessage) "\n" attr(title);
}

This pseudo element just needs to have a z-index higher than other elements which is similar to a dialog element.

I made some quick code to mimic this experience in the DOM for browsers that support the validationMessage API:

I plan to neaten this over the next few days and also turn it into a polyfill for new selectors but logging it here so it doesn’t get lost.