:-moz-placeholder

不推荐

提示: 在Firefox 19+版本中 :-moz-placeholder 伪类将被 ::-moz-placeholder 伪元素所替代.

« CSS « CSS 参考 « Mozilla Extensions

摘要

 :-moz-placeholder伪类控制元素所显示的文字占位符文字占位符. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.

示例

这个示例将文字占位符改变为了绿色.

<!doctype html>
<html>
<head>
  <title>Placeholder demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

查看这个示例.

溢出

在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS text-overflow: ellipsis; 来省略一中间部分文字.

input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }

It was David Walsh, the man on fire who introduced this to a lot of designers. Placeholders and Overflow.

Bugzilla

bug 457801

提示

提示: This was previously incorrectly documented as having been created for Gecko 1.9 (Firefox 3), for an entirely different purpose.

See also

Document Tags and Contributors

Contributors to this page: bowen-shi
最后编辑者: bowen-shi,