input html5 hint,Styling the hint on a HTML5 input field using required attribute

问题

Is it possible to style the hint that appears on a HTML5 input field when using the required attribute. If you're not sure what I'm talking about click submit on this form without filling anything in. You should have a hint popup.

http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

I've checked the CSS source and couldn't see anything regarding the hint.

I have found that styling the div element in a reset fashion affects how it appears. But I do not know how to target it specifically.

Please note: I am NOT referring to a placeholder.

Cheers,

Thomas.

回答1:

The reason, why you can style the error bubble with a div-selector is a bug in Chrome 11/12, which should be fixed in newer versions. There are some pseudoclasses to style the error bubble in Chrome 12 (and maybee in Safari6) (::-webkit-validation-bubble etc.). You can find the full HTML structure including the pseudoelement selectors and some styling examples in the following document.

Note, that this is a webkit extension to the HTML5 form constraint validation and non-standard. If you want to use a way to style the error message in all HTML5 validation supporting browsers, you have to use JavaScript.

The key principle of this, is that you have to add a handler to the invalid-event (Note: The invalid event does not bubble) and then prevent the default interaction. This will remove the browsers native error bubble and you are able to implement a custom styleable UI in all HTML5 browsers.

//Note: that we use true for useCapture, because invalid does not bubble

document.addEventListener('invalid', function(e){

//prevent the browser from showing his error bubble

e.preventDefault();

//now you can implement your own validation UI (showError is a Custom method which has to be implemented by you

showError(e.target, $.prop(e.target, 'validationMessage');

}, true);

The code above will call showError for all invalid elements in the current form. If you want to do this only for the first invalid element you can do the following:

document.addEventListener('invalid', (function(){

var isFirst = true;

return function(e){

//prevent the browser from showing his error bubble

e.preventDefault();

//now you can implement your own validation UI

if(isFirst){

showError(e.target, $.prop(e.target, 'validationMessage');

//set isFirst to false

isFirst = false;

//reset isFirst to true, so user can try to submit invalid forms multiple times

setTimeout(function(){

isFirst = true;

}, 9);

}

};

})(), true);

In case you are using jQuery for your site, I would recommend using webshims lib. webshims lib implements the HTML5 constraint validation in all browsers (including IE6) and gives a simple extension for generating a simple custom styleable validation message. The JS code looks like this:

$(document).bind('firstinvalid', function(e){

$.webshims.validityAlert.showFor( e.target );

//prevent browser from showing native validation message

return false;

});

The HTML-structure generated by $.webshims.validityAlert.showFor looks like this:

Error message of the current field

回答2:

you can style the validation bubble in webkit using the following pseudo-selectors:

::-webkit-validation-bubble

::-webkit-validation-bubble-top-outer-arrow

::-webkit-validation-bubble-top-inner-arrow

::-webkit-validation-bubble-message

For Mozilla browsers there isn't a way yet. Mozilla does support x-moz-errormessage if you want to change the text: https://developer.mozilla.org/en/HTML/element/input#section_5

回答3:

I found a way to disable the hints from showing.

Basically I found they're within a div element, in my reset if I add this to the top.

div { display: none; }

body div { display: block; }

Then the hints no longer appear, yet the rest of my divs work fine.

I'm also led to believe that the hints appear outside of the HTML document tag. As styling with html div also has no effect on the hints. Interesting stuff.

This only works in Chrome though.

回答4:

If you're referring to the hints that say Opera and Chrome use then I'm afraid you can't.

来源：https://stackoverflow.com/questions/5660177/styling-the-hint-on-a-html5-input-field-using-required-attribute