このマニュアルでは、CSS を使用して入力プレースホルダーの色を変更するさまざまな方法について説明します。
方法 1: 「::placeholder」セレクターを使用して入力プレースホルダーの色を変更する
CSS「 ::プレースホルダー ” セレクターは、プレースホルダー テキストを含むフォーム要素を選択するために使用されます。プレースホルダーのテキストを変更するために利用できます。さらに、このセレクターを使用して、入力プレースホルダーの色を変更できます。
構文
::placeholder の構文は次のとおりです。
:: プレースホルダ {
色 : 価値
}
の場所で ' 価値 」、選択に従って入力プレースホルダーの色を設定できます。
入力プレースホルダーの色を変更する実際の例に移りましょう。
例
入力プレースホルダーの色を変更するには、まず タグを使用して入力要素を作成し、入力のタイプを「 文章 」。次に、入力プレースホルダーのテキストを「 入る あなたの名前 」。
HTML
< 体 >< 入力 タイプ = '文章' プレースホルダー = 'あなたの名前を入力してください' >
< / 体 >
指定されたコードの出力は次のとおりです。
入力プレースホルダーのデフォルトの色は、上の画像に示されています。
次に、CSS に移り、「 ::プレースホルダ 」入力プレースホルダーのテキストにアクセスし、その色を「 RGB(17,0,255) 」。
CSS
:: プレースホルダ {色 : RGB ( 17 、 0 、 255 ) ;
}
ご覧のとおり、追加された入力プレースホルダーの色が青に変わります。
入力プレースホルダーの色を変更する別の方法があります。それをチェックしよう。
方法 2: 「::-webkit-input-placeholder」疑似クラス要素を使用して入力プレースホルダーの色を変更する
「 :: – webkit-input-プレースホルダー 疑似クラス要素は、主にフォーム要素のプレースホルダー テキストを表します。テーマ デザイナーや開発者は、プレースホルダー テキストの外観をカスタマイズするために利用できます。さらに、指定された要素を使用することで、ユーザーは入力プレースホルダーの色を変更できます。
構文
::-webkit-input-placeholder の構文は次のとおりです。
:: -webkit-input-placeholder {色 : 価値
}
の場所で ' 価値 」で、入力プレースホルダーの色を設定できます。
上記の疑似クラス要素を理解するために例に移りましょう。
例
CSS ファイルでは、「 ::-webkit-input-placeholder 」疑似クラス要素を作成し、色の値を「 RGB(255, 13, 13) 」：
:::: -webkit-input-placeholder {色 : RGB ( 255 、 13 、 13 ) ;
}
出力
ここでは、入力プレースホルダーのデフォルトの色が変更されていることがわかります。
結論
入力プレースホルダーの色は、「 ::プレースホルダー 「セレクターと」 :: – webkit-input-プレースホルダー 」疑似クラス要素。これを使用すると、入力プレースホルダーのデフォルトの色を変更できます。この記事では、CSS プロパティを使用して入力プレースホルダーの色を変更する手順について説明しました。