MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    :-moz-placeholder

    Deprecated
    This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

    Note: The :-moz-placeholder pseudo-class is deprecated in Firefox 19 in favor of the ::-moz-placeholder pseudo-element.
    Note: The CSSWG have decided to introduce :placeholder-shown. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  bug 1069012

    « CSS « CSS Reference « Mozilla Extensions

    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 (Firefox 3), for an entirely different purpose.

    See also

    Document Tags and Contributors

    Last updated by: MusikAnimal,