HTML5和CSS3显示元素焦点的表单提示

Question

我正在用HTML5和CSS3构建一个网站,我希望为表单字段创建表单提示,显示该字段:focus我想要这样做而没有javascript这是可能的,下面是我的表单标记.

<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>

是否可以显示.message用户名输入何时:focus仅使用CSS3中的伪造类？

Answer 1

好吧,既然你提到了CSS3这里有一些CSS3淡入/淡出的解决方案.

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

演示:jsfiddle.net/Marcel/RqaV6

Answer 2

这是你要找的东西吗？

.message{visibility:hidden;}
input:focus+.message{visibility:visible}

编辑:你也可以看看:http: //reference.sitepoint.com/css/adjacentsiblingselector