--- title: ':-moz-placeholder' slug: conflicting/Web/CSS/:placeholder-shown tags: - CSS - CSS Reference - Non-standard translation_of: Web/CSS/:placeholder-shown translation_of_original: Web/CSS/:-moz-placeholder original_slug: Web/CSS/:-moz-placeholder ---

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}

Note: The :-moz-placeholder pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-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)}}

概要

:-moz-placeholder はプレースホルダを表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。

たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。

例

この例はプレースホルダの文字色を緑色に変更しています。

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

Bugzilla

{{ Bug(457801) }}

注記

Note: このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、全く異なる目的 から間違って作られていました。

参考