mozilla
Your Search Results

    ::-moz-placeholder

    この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。
    Note: The ::-moz-placeholder pseudo-element was introduced as a replacement for the :-moz-placeholder pseudo-class that has been deprecated in Firefox 19.

    Summary

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

    The result looks like this:

    Browser compatibility

    Firefox applies a default style of opacity: 0.4 to placeholder text. Most other major browsers don't currently share this particular default style for their placeholder text pseudo-elements or pseudo-classes.

    Bugzilla

    • bug 737786 - Switch from :-moz-placeholder to ::-moz-placeholder (pseudo-class to pseudo-element)
    • bug 556145 - Change placeholder text default styling from color: GrayText to opacity: 0.4

    See also

    ドキュメントのタグと貢献者

    Contributors to this page: Sheppy, zolotov, ethertank, cvrebert, MusikAnimal, Krinkle, fneumann
    最終更新者: MusikAnimal,