mozilla

Revision 431453 of ::-moz-placeholder

  • Revision slug: Web/CSS/::-moz-placeholder
  • Revision title: ::-moz-placeholder
  • Revision id: 431453
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{CSSMozExtensionRef}}
Note: The {{cssxref('::-moz-placeholder')}} pseudo-element was introduced as a replacement for the :-moz-placeholder pseudo-class that has been deprecated in Firefox 19.
{{gecko_minversion_header("19.0")}}

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>

View live example

Bugzilla

{{Bug(737786)}} - Switch from :-moz-placeholder to ::-moz-placeholder (pseudo-class to pseudo-element)

See also

Revision Source

<div>
  {{CSSMozExtensionRef}}</div>
<div class="note">
  <strong>Note:</strong> The {{cssxref('::-moz-placeholder')}} pseudo-element was introduced as a replacement for the <code>:-moz-placeholder </code>pseudo-class that has been deprecated in Firefox 19.</div>
<div>
  {{gecko_minversion_header("19.0")}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>::-moz-placeholder</code> <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> represents any form element displaying <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a>. 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.</p>
<h2 id="Example">Example</h2>
<p>This example styles the placeholder text by making it green.</p>
<pre class="brush:html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Placeholder demo&lt;/title&gt;

&lt;style&gt;
input::-moz-placeholder {
  color: green;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

  &lt;input id="test" placeholder="Placeholder text!"&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><a class="button liveSample" href="/samples/cssref/moz-placeholder.html">View live example</a></p>
<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2>
<p>{{Bug(737786)}} - Switch from <code>:-moz-placeholder</code> to <code>::-moz-placeholder</code> (<em>pseudo-class</em> to <em>pseudo-element</em>)</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/Web/HTML/HTML5/Forms_in_HTML5">Forms in HTML5</a></li>
  <li>{{HTMLElement("input")}}</li>
  <li>{{HTMLElement("textarea")}}</li>
</ul>
Revert to this revision