:-moz-placeholder

  • Revision slug: Web/CSS/:-moz-placeholder
  • Revision title: :-moz-placeholder
  • Revision id: 476153
  • Created:
  • Creator: anushbmx
  • Is current revision? No
  • Comment Added Comments : input Placeholder, Placeholder

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.

Overflow

Oftentimes our search boxes and other form fields get drastically shortened on mobile devices. Unfortunately in some circumstances the INPUT element's placeholder text doesn't fit within the length of the element, thus displaying an ugly "cut off." To prevent this ugly display, you can use CSS text-overflow: ellipsis! to give it a wrap around.


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) }}

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="Overflow">Overflow</h3>
<p>Oftentimes our search boxes and other form fields get drastically shortened on mobile devices.  Unfortunately in some circumstances the INPUT element's placeholder text doesn't fit within the length of the element, thus displaying an ugly "cut off."  To prevent this ugly display, you can use CSS <code>text-overflow: ellipsis!</code> to give it a wrap around.</p>

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

<p>It was David Walsh, the man on fire who introduced this to a lot of designers.  <a class="external" href="http://davidwalsh.name/placeholder-overflow" title="Placeholders and Overflow">Placeholders and Overflow</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