IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    语义化的label?

    aoao发表于 2009-02-08 15:39:10
    love 0

    大家应该经常看到在文本框里提示文字,然后一点就没了。通常做法都是默认给个value,通过js来处理。详细实现都不介绍了,大家都会。现在来看一下一个比较创意的实现。

    就是直接用label的内容盖在input上面,然后用js来处理一下。详细实现就不用说了,反正我想尝试纯CSS是没办法实现滴。从结构上来看,还是比较理想的,充分利用了label

    
    

    MobileMe的登录界面

    其实看图看不出什么,点图去网站看一下。

    我还特别试了一下noscript的效果,跳转 囧rz。

    有些细节的,比如提示文字从灰变得更灰的过渡效果,是-webkit-transition的应用,要用webkit的浏览器才能体现。

    再其实,input有个叫placeholder的属性,参考以前类型为search的input及相关属性,可以直接用在type="text"的input上,不过哪种方式在哪些情况应用会更适合呢,大家自己决定吧。



沪ICP备19023445号-2号
友情链接