使用html5+css3实现带提示文字的文本框

最新推荐文章于 2024-06-27 10:54:13 发布

liuzhifang1

最新推荐文章于 2024-06-27 10:54:13 发布

阅读量3.5k

点赞数

分类专栏： html5+css3 文章标签： html5+ css3 webkit placeholder

本文链接：https://blog.csdn.net/liuzhifang1/article/details/25974495

版权

html5+css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta content="" description="" />
<meta charset="utf-8" />
<style type="text/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;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入用户名" />
</body>
</html>

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