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