Styling HTML5 Validation

Labels: , , · Posted by at
To change the style of the validation message bubble, four div elements with pseudo-classes are used:


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


You can clearly see the change in the validation message bubble


Before Styling

After Styling

Let's add some style in the validated input field I've created here:

CSS:


::-webkit-validation-bubble-arrow
{
border:2px solid #F00;
background:#FD8484;
-webkit-box-shadow:none;
}
::-webkit-validation-bubble-message
{
position: relative;
color:#F00;
background:#FD8484;
border:2px solid #F00;
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.333);
}

This is what it will give:

After Styling

You can learn more about this styling at WebKit wiki.
Credit goes to  WebKit wiki 

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)