::-moz-placeholder

Note: The ::-moz-placeholder pseudo-element was introduced as a replacement for the :-moz-placeholder pseudo-class that has been deprecated in Firefox 19.

Summary

The ::-moz-placeholder pseudo-element represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-class to change the placeholder text color.

Example

This example styles the placeholder text by making it green.

<!DOCTYPE html>
<html>
<head>
<title>Placeholder demo</title>

<style>
input::-moz-placeholder {
  color: green;
}
</style>

</head>
<body>

  <input id="test" placeholder="Placeholder text!">

</body>
</html>

The result looks like this:

Bugzilla

bug 737786 - Switch from :-moz-placeholder to ::-moz-placeholder (pseudo-class to pseudo-element)

See also

Document Tags and Contributors

Last updated by: ethertank,