WebDesigner's Memorandumウェブデザイナーの備忘録

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

CSSでフォーム入力欄の::placeholderを設定する方法

Placeholderとは?

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

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

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

See the Pen placeholder by Masakazu Saito (@31mskz10) on CodePen.

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 by Masakazu Saito (@31mskz10) on CodePen.

 

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね