お気軽にご相談ください
050-8885-7511
全国対応・平日10時〜18時

placeholderの色をCSSで変更する方法

代表取締役

児島 大

テキストボックスにplaceholderをつかってサンプルを用意しておくことは、EFO(入力フォーム最適化)の観点からもおすすめです。
この記事では、placeholderの文字色をサイトカラーにあわせてCSSで変更する方法を解説します。

placeholderとは

placeholderとは、inputタグやtextareaタグなどの文字入力フォームで事前にサンプル文字を入れておくことができる要素です。
サンプル文字がはいっていることで、ユーザーが迷うことなく入力できるようになります。

placeholderの色の変更方法

placeholderの色は::placeholder疑似要素をつかうことで変更できます。

input::placeholder {
	color: #FF0000;
}
textarea::placeholder {
	color: #FF0000;
}

クロスブラウザで完全対応させるにはプレフィックス対応が必須

上記の疑似要素のみではまだすべてのブラウザでサポートされていないので、主要ブラウザに対応させるには、各ブラウザのプレフィックスをつかった対応が必要です。

input::-webkit-input-placeholder {
	color: #FF0000;
}
input:-ms-input-placeholder {
	color: #FF0000;
}
input::-moz-placeholder {
	color: #FF0000;
}

まとめ

EFOの観点からもplaceholderはあったほうが望ましいです。
しかし、placeholderの色がサイトカラーと合わないような場合にはCSSの疑似要素をつかうことで、色の変更ができますので対応してみましょう。

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

資料準備中…

お電話でのお問い合わせはこちら

  • ※電話番号はおかけ間違いのないようご注意ください。
  • ※セールス目的のお電話はお断りしております。