您的位置：首页 > Web前端 > HTML5

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

2014-05-16 14:16 543 查看
代码如下：

<!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标签，就是无法修改它的颜色而已。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5+ css3 webkit placeholder
相关文章推荐
新的分享
章节导航