4208

Chrome は要素のplaceholder 属性をサポートしています (おそらく他のものも同様です)。input[type=text]

しかし、次の CSS はプレースホルダーの値に対して何もしません。

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

しかし、代わりにValue残ります。greyred

プレースホルダーのテキストの色を変更する方法はありますか?

4

43 に答える 43

4997

実装

3 つの異なる実装があります: 疑似要素、疑似クラス、および何もありません。

  • WebKit、Blink (Safari、Google Chrome、Opera 15+)、および Microsoft Edge は、疑似要素: を使用しています::-webkit-input-placeholder。[参照]
  • Mozilla Firefox 4 から 18 は疑似クラス:-moz-placeholder( 1 つのコロン) を使用しています。[参照]
  • Mozilla Firefox 19 以降は疑似要素: を使用して::-moz-placeholderいますが、古いセレクターもしばらくの間は機能します。[参照]
  • Internet Explorer 10 および 11 は疑似クラスを使用しています: :-ms-input-placeholder. [参照]
  • 2017 年 4 月:最新のブラウザーのほとんどが単純な疑似要素をサポート::placeholder [参照]

Internet Explorer 9 以前はplaceholder属性をまったくサポートしていませんが、Opera 12以前はプレースホルダーの CSS セレクターをサポートしていません。

最適な実装についての議論はまだ進行中です。疑似要素は、Shadow DOM内の実際の要素のように機能することに注意してください。padding上のはinput、疑似要素と同じ背景色になりません。

CSS セレクター

ユーザー エージェントは、不明なセレクターを持つルールを無視する必要があります。セレクター レベル 3を参照してください。

無効なセレクターを含むセレクターのグループは無効です。

そのため、ブラウザごとに個別のルールが必要です。そうしないと、グループ全体がすべてのブラウザーで無視されます。 

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

使用上の注意

  • 悪いコントラストを避けるように注意してください。Firefox のプレースホルダーはデフォルトで不透明度を下げているように見えるため、opacity: 1ここで使用する必要があります。
  • プレースホルダー テキストは、収まらない場合は切り取られることに注意してください。入力要素のemサイズを変更し、最小フォント サイズを大きく設定してテストしてください。翻訳を忘れないでください。一部の言語では、同じ単語に対してより多くのスペースが必要です。
  • HTML をサポートしてplaceholderいるが CSS をサポートしていないブラウザー (Opera など) もテストする必要があります。
  • 一部のブラウザーは、一部のinputタイプ ( email、search) に対して追加のデフォルト CSS を使用します。これらは、予期しない方法でレンダリングに影響を与える可能性があります。プロパティ -webkit-appearanceを使用して、それ-moz-appearanceを変更します。例：
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
于 2010-04-09T20:36:56.707 に答える
764 

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

inputこれにより、すべてのプレースホルダーとプレースホルダーがスタイル設定されますtextarea。

重要な注意：これらのルールをグループ化しないでください。代わりに、セレクターごとに個別のルールを作成します（グループ内の1つの無効なセレクターにより、グループ全体が無効になります）。

于 2012-03-14T16:13:34.980 に答える
307

テキストエリアのスタイルを設定することもできます:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #FF9900;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #FF9900;
}
<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
</textarea>

于 2011-05-11T01:52:25.473 に答える
118

BootstrapおよびLessユーザーには、mixin .placeholder があります。

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
于 2013-06-06T08:47:46.010 に答える
109

toscho の回答に加えて、Chrome 9-10 と Safari 5 の間でサポートされている CSS プロパティが注目に値する Webkit の不一致に気付きました。

具体的には、Chrome 9 および 10 は、プレースホルダーのスタイリング時にbackground-color、border、text-decorationおよび をサポートしていません。text-transform

クロスブラウザーの完全な比較はこちら.

于 2011-02-09T16:44:24.217 に答える
68

これはうまくいきます。デモはこちら:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />

于 2013-09-14T12:52:16.383 に答える
55

FirefoxおよびInternetExplorerでは、通常の入力テキストの色がプレースホルダーのcolorプロパティを上書きします。だから、私たちはする必要があります

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
于 2013-02-14T21:11:14.887 に答える
48

autoprefixer::placeholderを使用する場合は newを使用してください。

Bootstrapの .placeholder mixin は、これを支持して非推奨になっていることに注意してください。

例：

input::placeholder { color: black; }

autoprefixer を使用すると、上記はすべてのブラウザで正しいコードに変換されます。

于 2015-08-14T09:25:51.607 に答える
42

クロスブラウザ ソリューション:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

クレジット: David Walsh

于 2014-01-02T23:27:05.307 に答える
36

入力タイプのテキストにのみプレースホルダーが必要なため、このコードは機能すると思います。したがって、この 1 行の CSS で十分です。

input[type="text"]::-webkit-input-placeholder {
    color: red;
}
于 2015-06-25T09:01:36.503 に答える
20

これはどう

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

CSS やプレースホルダーはありませんが、同じ機能を利用できます。

于 2012-10-08T19:21:05.900 に答える
19

この短くてきれいなコード:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}
于 2015-12-22T10:38:44.993 に答える
16

ここですべての組み合わせを試して、モバイルプラットフォームで色を変更しましたが、最終的には次のようになりました。

-webkit-text-fill-color: red;

トリックを行いました。

于 2015-08-05T07:56:32.417 に答える
9

Bourbonを使用している SASS/SCSS ユーザー向けに、組み込み関数があります。

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS 出力、この部分を取得してコードに貼り付けることもできます。

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}
于 2016-10-04T07:50:11.997 に答える
6

もう 1 つの例を次に示します。

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}
<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

于 2016-05-31T09:21:03.780 に答える
2

Compassには、すぐに使用できる mixin があります。

あなたの例を見てください：

<input type="text" placeholder="Value">

そして、コンパスを使用する SCSS で:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

input-placeholder mixin のドキュメントを参照してください。

于 2016-09-20T12:37:05.720 に答える
-1

これを試してみると、これはすべてのお気に入りのブラウザーで機能します。

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
于 2017-09-22T14:12:31.303 に答える