CSS で HTML5 入力プレースホルダーの色を変更する
Jay Singh
2023年2月20日
あなたのウェブサイトやウェブページを群衆から目立たせたいのなら、HTML コードだけではそれをカットすることはできません。CSS プロパティを使用してスタイルを設定する必要があります。
CSS では、さまざまなプロパティとセレクターを使用して HTML5 コンポーネントのスタイルを設定し、よりユーザーフレンドリーにすることができます。HTML5 では、さまざまな CSS セレクターによって、テキストの色、フォント、フォントサイズ、テキストの配置などが変更されます。
HTML5 では、placeholder プロパティは、例を表示することにより、ユーザーに正しい構文を案内します。ユーザーが値を入力する前に、ブラウザーはフォーマットを示します。
これは、HTML の入力要素で最も一般的に使用され、ユーザーが名前、年齢、電話番号などの情報を送信できるようにします。この記事では、CSS を使用して HTML5 入力のプレースホルダーの色を変更する方法について説明します。
CSS で HTML5 入力プレースホルダーの色を変更する
この例では、スタイル CSS で:: placeholder セレクターを使用して、プレースホルダーテキストの色をオレンジ色に変更しています。 <input> タグを使用してテキストを入力しました。
手紙だけかかります。プレースホルダープロパティは、ユーザーの便宜のためにも利用されます。
例 1：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Color</title>
<style>
::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
color:orange;
}
</style>
</head>
<body>
<p>Please enter your name</p>
<input type="text" placeholder="Text only">
</body>
</html>
以下の例では、<form> 要素を使用して HTML フォームを作成することから始めました。 ::placeholder セレクターを使用すると、フォーム内の 3つの <input> コンポーネントすべてのプレースホルダーテキストの色が変更されます。
例 2：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder2</title>
</head>
<style>
::placeholder{
color: green;
}
</style>
<body>
<h2> Please fill the form</h2>
<form>
<input type="text" placeholder="Enter your name"><br>
<input type="number" placeholder="Enter your age"><br>
<input type="email" placeholder="Enter your email-id">
</form>
</body>
</html>