# CSSで::placeholderにスタイルを設定する方法

URL: https://webrandum.net/css-placeholder/
公開日: 2019-11-08
更新日: 2019-11-08
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

## Placeholderとは？

「Placeholder(プレースホルダー)」は`<input>`タグや、`<textarea>`に何も入力がない状態で、代わりに表示される、ガイド用のテキストです。

デフォルトでは、通常の入力テキストよりも少し薄い色で表示されていて、テキストが入力されると表示が消えます。

```
<input type="text" placeholder="山田 太郎">
```

See the Pen [placeholder](https://codepen.io/31mskz10/pen/QWWQKZd) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

## Placeholderのスタイル設定

スタイルの指定方法は簡単で`::placeholder`という擬似クラスを使えばOKです。

```
::placeholder{
color:#ccc
}
```

要素名やclass名などを前に付けることで、特定要素に対してのみの指定も可能です。

```
.strong::placeholder{
color: #f00;
}
```

ブラウザの対応もかなり進んでは来ましたが、EdgeやIE11に対応するためにはベンダープレフィックスも必要です。

```
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#ccc;
}
```

See the Pen [yLLvVBp](https://codepen.io/31mskz10/pen/yLLvVBp) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).