HTML5 and CSS3 show form hints on element focus

Question

I am building a website in HTML5 and CSS3, I am looking to create form hints for form fields that show the the field has :focus I would like to do this without javascript is this possible, below is my form markup.

<label for="username">Username</label>  
<input type="text" name="username" value=""/>
<div class="message">You need a username that is more than 5 letters long</div>

Is it possible to show .message when the username input has :focus using just psuedo classes in CSS3?

Answer 1

Well, since you mentioned CSS3 here's a solution with some CSS3 fade in/out flair.

HTML

<label for="username">Username</label>  
<input type="text" id="username" name="username">
<div class="msg">You need a username that is more than 5 letters long</div>

CSS

.msg { color:#999; opacity:0; display:inline;
    transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
}
input:focus+.msg { opacity:1; }

Demo: jsfiddle.net/Marcel/RqaV6