We would like to know how to create Form Validation Label with Arrow.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#test {<!-- w w w.ja v a 2 s. c o m-->
position: relative;
padding: 8px 12px;
background-color: #E15A12;
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #fff;
text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
-webkit-box-shadow: inset -2px 2px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: inset -2px 2px 3px rgba(0, 0, 0, .2);
box-shadow: inset -2px 2px 3px rgba(0, 0, 0, .2);
}
#test:before {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-right-color: #E15A12;
top: 6px;
right: 100%;
}
</style>
</head>
<body>
<div id="test">This is only a test</div>
</body>
</html>
The code above is rendered as follows: