How to use Email tag in HTML5

Question

In HTML5 there is a new tag

<input type="email">

when I am using it in a form, the error it shows when i leave it blank or put a non email text or in it looks pretty weird . How can I change the CSS and text for that error box ??

What browser/version does it look "weird" in? Also, "email" is not a tag, just an input type. — Matt Ball, Sep 27 '11 at 22:35
duplicate: http://stackoverflow.com/questions/5478800/override-css-for-html5-form-validation-required-popup — amosrivera, Sep 27 '11 at 22:35
@amosrivera thanks for link but it says no ways to edit the CSS is it really no ways for that ?? — Sahil Grover, Sep 27 '11 at 22:47
Nope, niet, nein, niente, nada. If it really matters so much then i suggest you use a js approach — amosrivera, Sep 27 '11 at 22:48
Posting this as a comment, because I have no experience with it, but according to this article, if the browser supports the CSS3 UI basic module (http://www.w3.org/TR/css3-ui/), then there are some pseudo-classes you can use to manipulate the validation. Article here: http://www.alistapart.com/articles/forward-thinking-form-validation/ Browser support is limited to newer ones, but a pretty big list. — Doozer Blake, Sep 27 '11 at 22:55
@Blake this manipulates the input styling not the popup error.. — amosrivera, Sep 27 '11 at 22:56
@amosrivera my bad, you're correct. I guess i was fooled by the styling around the hints on the sample that they added, which were styled and displaying, not the actual validation messages coming from the browser. — Doozer Blake, Sep 27 '11 at 23:00

score 0 · Accepted Answer · edited May 23 '17 at 12:19

For Google Chrome, you could use the following pseudo-classes to style the bubble:

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

Not sure if/when other browsers will support styling the error messages. See the following links for reference:

Styling HTML5 Form Validation Errors

How do you style the HTML5 form validation messages?

How to use Email tag in HTML5

1 Answers1