html5配合css3实现带提示文字的输入框-创新互联

这篇文章主要介绍“html5配合css3实现带提示文字的输入框”，在日常操作中，相信很多人在html5配合css3实现带提示文字的输入框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5配合css3实现带提示文字的输入框”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联专注于科尔沁左翼企业网站建设,成都响应式网站建设,商城网站定制开发。科尔沁左翼网站建设公司,为科尔沁左翼等地区提供建站服务。全流程按需定制设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

 
当选中对话框后，提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。
HTML5出现后，我们有一个更好的方法。

代码如下:

我们看到有placeholder标签，可以作为用户文字提示。这样子就非常方便了。但是为了最求完美，我们需要在选中后，将文字变浅，或者修改提示文件的样式，我们该怎么办？

代码如下:

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

-webkit-input-placeholder，webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合。当然你要为了兼容IE6，这个方法是行不通。不过Ie9也支持placeholder标签，就是无法修改它的颜色而已。

到此，关于“html5配合css3实现带提示文字的输入框”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网页名称：html5配合css3实现带提示文字的输入框-创新互联
路径分享：http://6mz.cn/article/jicec.html