:-moz-placeholder

  • Revision slug: CSS/:-moz-placeholder
  • Revision title: :-moz-placeholder
  • Revision id: 332561
  • Created:
  • Creator: Saturn2888
  • Is current revision? No
  • Comment Seems like placehoder is a typo.

Revision Content

{{ deprecated_header() }}

Note: The :-moz-placeholder pseudo-class will be deprecated in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element in Firefox 19.

{{ CSSMozExtensionRef() }}

{{ gecko_minversion_header("2.0") }}

Summary

The :-moz-placeholder pseudo-class 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 type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

View this example live.

Bugzilla

{{ Bug(457801) }}

Notes

Note: This was previously incorrectly documented as having been created for Gecko 1.9 {{ geckoRelease("1.9") }}, for an entirely different purpose.

{{ languages( { "ja": "ja/CSS/:-moz-placeholder" } ) }}

See also

  • Forms in HTML5
  • {{ HTMLElement("input") }}
  • {{ HTMLElement("textarea") }}

Revision Source

<p>{{ deprecated_header() }}</p>
<div class="note">
  <strong>Note:</strong> The <code>:-moz-placeholder</code> pseudo-class will be deprecated in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element in Firefox 19.</div>
<p>{{ CSSMozExtensionRef() }}</p>
<p>{{ gecko_minversion_header("2.0") }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>The <code>:-moz-placeholder</code> <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> represents any form element displaying <a href="/en/HTML/Forms_in_HTML#The_placeholder_attribute" title="en/HTML/HTML5/Forms in HTML5#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>
<h3 id="Example">Example</h3>
<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 type="text/css"&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 href="/samples/cssref/moz-placeholder.html" title="https://developer.mozilla.org/samples/cssref/moz-placeholder.html">View this example live</a>.</p>
<h3 id="Bugzilla" name="Bugzilla">Bugzilla</h3>
<p>{{ Bug(457801) }}</p>
<h3 id="Notes">Notes</h3>
<div class="note">
  <strong>Note:</strong> This was previously incorrectly documented as having been created for Gecko 1.9 {{ geckoRelease("1.9") }}, for an <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=11011" title="https://bugzilla.mozilla.org/show_bug.cgi?id=11011">entirely different purpose</a>.</div>
<p>{{ languages( { "ja": "ja/CSS/:-moz-placeholder" } ) }}</p>
<h3 id="SeeAlso" name="SeeAlso">See also</h3>
<ul>
  <li><a href="/en/HTML/HTML5/Forms_in_HTML5" title="en/HTML/HTML5/Forms in HTML5">Forms in HTML5</a></li>
  <li>{{ HTMLElement("input") }}</li>
  <li>{{ HTMLElement("textarea") }}</li>
</ul>
Revert to this revision