-
Book Overview & Buying
-
Table Of Contents
Designing Next Generation Web Projects with CSS3
By :
Each browser actually displays form errors in its own way, and we can't do very much to affect this visualization. The only exceptions are WebKit-based browsers, which let us change the appearance of such messages. The following code shows how an error balloon is constructed in these browsers:
<div>::-webkit-validation-bubble
<div>::-webkit-validation-bubble-arrow-clipper
<div>::-webkit-validation-bubble-arrow
</div>
</div>::-webkit-validation-bubble-message
<div>
<b>Browser validation message</b>
element's title attribute
</div>
</div>We can access all the elements that compose an error message by using the special pseudo-classes listed in the preceding code. So, let's begin!
::-webkit-validation-bubble{
margin-left: 380px;
margin-top: -50px;
width: 200px;
}
input[type=radio]::-webkit-validation-bubble{
margin-left: 50px;
margin-top: -50px;
}
::-webkit-validation-bubble-arrow-clipper{
-webkit-transform: rotate(270deg) translateY(-104px)
translateX(40px);
}
::-webkit-validation-bubble-arrow{
background: #000;
border: none;
box-shadow: 0px 0px 10px rgba(33,33,33,0.8);
}
::-webkit-validation-bubble-message{
border: 5px solid black;
background-image: none;
box-shadow: 0px 0px 10px rgba(33,33,33,0.8);
}With -webkit-transform, we're applying some transformation to the matched elements. In this case, we're moving the arrow, which usually lies on the bottom of the balloon, to the left side of it.
The following is a glimpse of how our completed project looks:

Change the font size
Change margin width
Change background colour