CSS を使用して HTML 入力フィールドのプレースホルダー テキストの色を変更する方法

CSS を使用したプレースホルダー テキストのスタイル設定

HTML フォームを使用する場合、入力フィールド内のプレースホルダー テキストの外観をカスタマイズしたい場合があります。 Chrome v4 およびその他のブラウザは、input[type=text] 要素のプレースホルダー属性をサポートしていますが、この属性に CSS スタイルを適用するだけでは、常に期待どおりに機能するとは限りません。

たとえば、標準の CSS セレクターを使用してプレースホルダーのテキストの色を変更しようとしても、望ましい結果は得られません。この記事では、正しい CSS 疑似要素とブラウザ固有のルールを使用して、プレースホルダー テキストの色を効果的に変更する方法について説明します。

プレースホルダー テキストのスタイル設定テクニックを理解する

最初のスクリプトでは、 ::placeholder、特に入力フィールドのプレースホルダー テキストをターゲットとする CSS 疑似要素。標準の CSS セレクターはプレースホルダー テキストに影響を与えないため、これは非常に重要です。を使用することで input::placeholderでは、色を赤に変更するなど、プレースホルダー テキストにスタイルを直接適用できます。さらに、スクリプトには次のようなブラウザ固有のセレクターが含まれています。 input:-moz-placeholder Mozilla Firefox の場合と input::-ms-input-placeholder Internet Explorer および Microsoft Edge の場合。これらのセレクターは、さまざまなブラウザー間での互換性を確保し、ユーザーのブラウザーの選択に関係なく、プレースホルダーのテキストの色を均一にスタイル設定できるようにします。

2 番目のスクリプトは JavaScript を使用して、プレースホルダーのテキストの色を動的に変更します。それはから始まります DOMContentLoaded イベントを使用して、最初の HTML ドキュメントが完全にロードされた後にのみスクリプトが実行されるようにします。の querySelector 次に、メソッドを使用して入力要素を選択します。イベント リスナーはこの要素に追加され、フォーカス イベントとブラー イベントを処理します。入力フィールドにフォーカスが移ると、プレースホルダー テキストがクリアされ、入力テキストの色が黒に設定されます。入力フィールドがフォーカスを失うと、プレースホルダー テキストが復元され、その色が赤に設定されます。の setAttribute メソッドを使用してプレースホルダー属性を動的に更新し、プレースホルダー テキストが期待どおりに表示および非表示になるようにします。

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

プレースホルダーのスタイル設定のための高度なテクニック

基本的な CSS および JavaScript の方法以外にも、プレースホルダー テキストのスタイルを設定するためのより高度なテクニックがあります。そのような方法の 1 つは、CSS 変数を使用して、より動的なスタイル システムを作成することです。カスタム プロパティとも呼ばれる CSS 変数を使用すると、開発者はスタイルシート全体で再利用できる値を保存できます。これにより、複数の要素にわたってスタイルを更新するプロセスが簡素化されます。たとえば、プレースホルダーの色のカスタム プロパティを定義すると、複数の CSS ルールを変更せずに 1 か所で色を簡単に変更できます。

考慮すべきもう 1 つの側面は、拡張スタイル機能を提供するフレームワークとライブラリの使用です。 Bootstrap などのライブラリや Tailwind CSS などのフレームワークは、プレースホルダーを含むフォーム要素のスタイル設定に役立つ事前定義されたクラスを提供します。これらのツールを使用すると時間を節約し、アプリケーションのさまざまな部分にわたる一貫性を確保できます。さらに、SASS や LESS などのプリプロセッサを活用すると、ネスト、ミックスイン、継承などの機能で CSS をさらに強化し、コードの保守性と拡張性を高めることができます。

プレースホルダーのスタイル設定テクニックに関する最終的な考え

HTML 入力フィールドのプレースホルダー テキストの色を変更するには、CSS と JavaScript ソリューションを組み合わせる必要があります。 CSS 疑似要素とブラウザ固有のセレクターを使用すると互換性が確保され、JavaScript を使用するとユーザーの操作に基づいて動的な変更が可能になります。 CSS 変数、フレームワーク、プリプロセッサなどの高度なテクニックを使用すると、スタイル設定プロセスをさらに強化し、より効率的で保守しやすくすることができます。これらの方法をマスターすると、フォームの美しさをより適切に制御できるようになり、ユーザー エクスペリエンスが向上します。