W3cubDocs

/CSS

:-moz-placeholder

Note: The :-moz-placeholder pseudo-class was deprecated in Firefox 19 in favor of the ::-moz-placeholder pseudo-element and since Firefox 51 this feature is implemented using the standardized :placeholder-shown pseudo-class.

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.

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

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

Basic 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;
      opacity: 1;
    }
    input:-moz-placeholder {
      color: green;
      opacity: 1;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!">
</body>
</html>

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

Specifications

Not part of any specification.

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	No support	4.0 (2.0)^[1]	No support	No support	No support

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	No support	?	No support	No support	No support