CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでHTML5入力フィールドのプレースホルダーの色を変更する方法

HTML5では、placeholder（プレースホルダー）という新しい属性が導入されました。この属性は<input>要素や<textarea>要素に指定することで、ユーザーがフィールドに入力すべき内容のヒントを表示できます。

プレースホルダーとは

プレースホルダーとは、入力欄に何を入力すればよいかを示す仮のテキストのことです。以下の例では、メールアドレス入力欄に表示されている「email@example.com」というヒントがプレースホルダーです。ユーザーが入力を始めると、このテキストは自動的に消えます。

<!DOCTYPE HTML>
<html>
   <body>
      <form action="/cgi-bin/html5.cgi" method="get">
         メールアドレス入力： <input type="email" name="newinput" placeholder="email@example.com"/>
         <input type="submit" value="送信" />
      </form>
   </body>
</html>

上記のコードを実行すると、入力欄に薄い色のヒントテキスト「email@example.com」が表示され、placeholder属性の基本的な使い方を確認できます。

CSSでプレースホルダーの色を変更する

プレースホルダーのデフォルトはグレー系の色ですが、デザインに合わせて変更したい場合もあります。これを実現するにはCSSの疑似要素を使用します。

ブラウザによって記述方法が異なるため、主要なブラウザに対応させるには、以下のように複数のセレクタを併記するのがポイントです。

<!DOCTYPE HTML>
<html>
   <style>
      ::-webkit-input-placeholder { /* Chrome / Safari / Edge（WebKit、Blink系） */
        color: #7F0D10;
      }
      :-moz-placeholder { /* Firefox 4〜18 */
        color: #7F0D10;
        opacity: 1;
      }
      ::-moz-placeholder { /* Firefox 19以降 */
        color: #7F0D10;
        opacity: 1;
      }
   </style>
   <body>
      <form action="/cgi-bin/html5.cgi" method="get">
         メールアドレス入力： <input type="email" name="newinput" placeholder="email@example.com"/>
         <input type="submit" value="送信" />
      </form>
   </body>
</html>

各セレクタの解説

  • ::-webkit-input-placeholder … Chrome・Safari・旧Edgeなど、WebKit／Blink系ブラウザ向けの指定です。
  • :-moz-placeholder … Firefox 4〜18向けの古い記述です。
  • ::-moz-placeholder … Firefox 19以降向けの記述です。Firefoxではデフォルトで opacity が下がるため、意図した色味にするには opacity: 1; を明示するとよいでしょう。

モダンブラウザなら::placeholderが便利

現在の主要ブラウザでは、標準化された::placeholder疑似要素がサポートされています。古いブラウザへの対応が必要ない場合は、次のようにシンプルに書けます。

::placeholder {
  color: #7F0D10;
  opacity: 1;
}

このように、対象ブラウザに応じて適切なセレクタを選択することで、プレースホルダーの色を自由にカスタマイズできます。フォームのデザイン性を高めたい場合や、ブランドカラーに統一したい場合にぜひ活用してください。

  1. CSSでテキストボックスのプレースホルダーの色を変更する方法

    Webフォームの入力欄に表示されるプレースホルダー(仮置きテキスト)の色は、CSSの ::placeholder 疑似要素を使うことで自由に変更できます。デフォルトのグレー表示から、サイトのデザインに合わせた色へとカスタマイズすることで、フォームの見栄えやユーザビリティを向上させることができます。::placeholder疑似要素の基本構文::placeholder 疑似要素の書き方は以下のとおりです。::placeholder { 属性: 値; }例1:特定の入力欄だけプレースホルダーの色を変える次の例では、:last-child セレクタと組み合わせることで、2つ目のinput要素の

  2. CSSのcaret-colorプロパティでキャレット（テキストカーソル）の色を変更する方法

    テキスト入力時に表示される挿入キャレット（テキストカーソル）の色を変更するには、CSSのcaret-colorプロパティを使用します。このプロパティを使うことで、input要素やtextarea要素などの編集可能な要素において、デフォルトの黒いカーソルを任意の色にカスタマイズできます。caret-colorプロパティの基本caret-colorプロパティには、以下のような値を指定できます。任意の色：red、chartreuse、#ff0000 などの色名やカラーコードtransparent：キャレットを非表示にする（透明化）auto：ブラウザのデフォルト設定に従う例1：キャレットの色を変更する