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

CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。

それぞれのセレクタの役割は以下の通りです。

  • ::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）
  • :-ms-input-placeholder … Internet Explorer 10〜11 向け
  • ::-ms-input-placeholder … 旧 Microsoft Edge 向け

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
    input {
        font-size: 40px;
        font-weight: bold;
    }
    ::placeholder {
        color: rgb(70, 53, 167);
    }
    :-ms-input-placeholder {
        color: rgb(66, 51, 155);
    }
    ::-ms-input-placeholder {
        color: rgb(122, 69, 182);
    }
</style>
</head>
<body>
<h1>プレースホルダーの色変更サンプル</h1>
<input type="text" placeholder="ここにテキストを入力してください" />
</body>
</html>

実行結果

上記のコードを実行すると、入力欄内のプレースホルダーテキストが指定した紫色系の色で表示されます。

CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

補足ポイント

  • color 以外にも font-size、font-style、opacity などを指定でき、プレースホルダーの見た目を細かくカスタマイズできます。
  • Firefox の古いバージョンでは ::-moz-placeholder が必要な場合があります。
  • プレースホルダーはあくまで入力のヒントであり、ユーザーが入力すると消えるため、重要な説明はラベルとして別途配置することをおすすめします。
  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：キャレットの色を変更する