html5配合css3实现带提示文字的输入框(摆脱js)

久违的技术文章，今日终于得以再提笔墨。近期在基于Webkit构建的系统中开发，涉及众多Html5与CSS3的应用，实现流畅运行的同时还大大减少了JS的使用量。对于开发者而言，这无疑是提升效率和体验的双重利好。

在对话框的选择上，一个常见的交互设计是当选中时，提示文字会变浅色，输入后消失。过去，我们往往通过Input标签后附加Label的方式结合JS控制来实现这一功能。随着HTML5的兴起，我们迎来了更为优雅的方式。

在HTML5中，placeholder标签为我们提供了天然的文字提示功能，极大地简化了这一交互设计。例如：``。这一简单的标签即可轻松实现用户的文字提示，无疑为开发者带来了极大的便利。

追求完美永无止境。为了在选中输入框后使提示文字变浅或修改其样式，我们可以利用Webkit特有的CSS技巧。代码如下：

```css

input::-webkit-input-placeholder {

color: 999;

-webkit-transition: color .5s;

}

input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {

color: c2c2c2;

-webkit-transition: color .5s;

}

```

通过这段精妙的CSS代码，我们可以轻松地创建一个带有动画效果的输入框，尤其适用于系统登录、搜索等场景。若需兼顾古老的IE6，此方法恐难奏效。但令人欣慰的是，IE9已支持placeholder标签，只是无法修改其颜色而已。

至于不支持Webkit的浏览器，我们可以考虑使用Jquery来辅助实现相关功能，但这不是的范围。在此提供一个Demo，仅在Webkit浏览器下才能完全展现其效果，你是否觉得它便捷而流畅呢？当然它的效果展示还需依赖于浏览器的支持。如同技术世界的每一次进步，我们在追求完美的路上永不停歇。