大家应该经常看到在文本框里提示文字,然后一点就没了。通常做法都是默认给个value,通过js来处理。详细实现都不介绍了,大家都会。现在来看一下一个比较创意的实现。
就是直接用label的内容盖在input上面,然后用js来处理一下。详细实现就不用说了,反正我想尝试纯CSS是没办法实现滴。从结构上来看,还是比较理想的,充分利用了label
<label id="usernameLabel" for="username" class="placeholder"><span>Member Name</span></label>
<input id="username" name="username" class="text" type="text" maxlength="128" value="" />
其实看图看不出什么,点图去网站看一下。
我还特别试了一下noscript的效果,跳转 囧rz。
有些细节的,比如提示文字从灰变得更灰的过渡效果,是-webkit-transition的应用,要用webkit的浏览器才能体现。
再其实,input有个叫placeholder的属性,参考以前类型为search的input及相关属性,可以直接用在type="text"的input上,不过哪种方式在哪些情况应用会更适合呢,大家自己决定吧。
推荐本书:《Web标准设计》

