购物车
登陆 / 注册
微信扫码登陆

推荐手册

::placeholder选择器

::placeholder选择器
设置对象文字占位符的样式
编辑:前端控 前端控 更新时间:2019-03-21 17:59:02

::placeholder

语法:

E::placeholder { sRules }

说明:

设置对象文字占位符的样式。
  • ::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
  • 当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。
  • 需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder
  • Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

::placeholder的使用示例:

<input type="text" placeholder="占位符"/>input::-webkit-input-placeholder {
	color: #999;
}
input:-ms-input-placeholder { // IE10+
	color: #999;
}
input:-moz-placeholder { // Firefox4-18
	color: #999;
}
input::-moz-placeholder { // Firefox19+
	color: #999;
}

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-9.02.0-3.6

4.0-

43.0-webkit-

3.1-4.0

15.0-

28.0-webkit-

3.2-4.1

2.1

-4.4.4-webkit-

18.0

-40.0-webkit-


10.0-

11.0-ms-


4.0

-18.0-moz- 

#1

5.0

-8.1-webkit-

4.3

-8.1-webkit-


19.0-

38.0-moz- 


#1表示::-moz-placeholder 伪元素在Firefox 19+替代了之前的 :-moz-placeholder 伪类

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
input::-webkit-input-placeholder {
  color: green;
}
input:-ms-input-placeholder { // IE10+
  color: green;
}
input:-moz-placeholder { // Firefox4-18
  color: green;
}
input::-moz-placeholder { // Firefox19+
  color: green;
}
</style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号