【HTML】input要素のプレースホルダー（placeholder）の色を変える方法！

あきぞらです。

HTML/CSSを弄っていて、プレースホルダー（Placeholder）の色を変えたいときがありました。

今回は、その方法について紹介していきます。

::placeholderでStyleを指定できる

::placeholderと指定することによって、

プレースホルダーのスタイルを指定することができます。

以下のようにCSSを記載してあげることで、プレースホルダーのスタイルを指定できます。

以下は、プレースホルダーの色を赤に指定しています。

::placeholder {
  color: red;
}

input や textareaなど特定の要素にのみ指定する場合

::placeholderは疑似要素なので、

タグやクラス名のあとに指定してあげれば大丈夫です。

input::placeholder {
  color: green;
  font-size: 27px;
}

.test-class::placeholder {
  color: orange;
}

簡単にプレースホルダーをデコレートできましたね！