HTML5 and CSS3 show form hints on element focus

http://stackoverflow.com/questions/5593500

by Marcel

HTML

<div id="wrap">
    <section>
        <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>
    </section>
</div>

CSS

body { color:#222; background:#eeeeed; font:13px/1.4 'segoe ui', sans-serif; }
p { margin:0 0 1em; }
a { color:#06c; }
a:hover { text-decoration:none; }
#wrap { margin:1em; padding:2em 3em; background:#fff; min-width:15em; max-width:60em; box-shadow:0 5px 10px #ccc;}

.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; }