Search code examples
csshtmlemail-validation

How to use Email tag in HTML5

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 ??

Solution

  • 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?