HTML5 input Placeholder(占位符)样式

placeholder 属性
placeholder(占位符)在实际的应用中非常常见,主要用作提示输入内容,现代浏览器都支持:

<input placeholder="搜索" type="text">

placeholder 样式

这里网上搜索了一下 placeholder 样式相关知识,分享一下:

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* Internet Explorer 10+ */
:-moz-placeholder { color:#f00; } /* firefox 14-18 */

/*  webkit 私有 */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* mozilla 私有 */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

可以看出placeholder 伪类样式还是相对丰富的。

赞(0) 打赏
未经允许不得转载:WEBTian开发 » HTML5 input Placeholder(占位符)样式

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这个可以,收藏下

    4年前 (2015-06-29)回复
  2. #-48

    X,这个伪类 样式字符大小也能控制吗

    4年前 (2015-07-08)回复

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏