CSS - :-moz-placeholder

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.

HTML
<!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.

CSS
input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* Firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }

Description  

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.

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

[1] Implemented in bug 457801.

See Also  

Specifications  

Not part of any specification.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:-moz-placeholder

CSS CSS Pseudo-class CSS Reference Input Placeholder Non-Standard Non-standard Placeholder