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

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

Webフォームの入力欄に表示されるプレースホルダー(仮置きテキスト)の色は、CSSの ::placeholder 疑似要素を使うことで自由に変更できます。デフォルトのグレー表示から、サイトのデザインに合わせた色へとカスタマイズすることで、フォームの見栄えやユーザビリティを向上させることができます。

::placeholder疑似要素の基本構文

::placeholder 疑似要素の書き方は以下のとおりです。

::placeholder {
   属性: 値;
}

例1:特定の入力欄だけプレースホルダーの色を変える

次の例では、:last-child セレクタと組み合わせることで、2つ目のinput要素のみプレースホルダーの色を「コーンフラワーブルー」に変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
input:last-child::placeholder {
   color: cornflowerblue;
}
</style>
</head>
<body>
<input type="text" placeholder="デフォルトの色" />
<input type="text" placeholder="新しい色をチェック :D" />
</body>
</html>

出力結果

上記のコードを実行すると、以下のような結果になります。

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

例2:すべての入力欄のプレースホルダー色を一括変更

次の例では、ページ内のすべてのinput要素に対して ::placeholder を適用し、プレースホルダーの色を「フクシア」に統一しています。あわせて、入力欄やコンテナのスタイリングも行っています。

<!DOCTYPE html>
<html>
<head>
<style>
input::placeholder {
   color: fuchsia;
}
input {
   margin: 2%;
   width: 100%;
}
div {
   display: flex;
   flex-direction: column;
   margin: 3%;
   padding: 3%;
   text-align: center;
   align-items: center;
   box-shadow: inset 0 0 30px brown;
}
button {
   width: 40%;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="通常のプレースホルダー" />
<input type="email" placeholder="somenone@somewhere.com" />
<button>ダミーボタン</button>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような結果になります。

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

ブラウザ対応に関する注意点

::placeholder は主要なモダンブラウザで広くサポートされていますが、古いバージョンのブラウザではベンダープレフィックス(::-webkit-input-placeholder、::-moz-placeholder など)が必要な場合があります。幅広い環境に対応させたい場合は、これらのプレフィックス付きセレクタも併せて記述しておくと安心です。

  1. Windows 10でタスクバーの色を変更する方法！基本の手順と裏ワザを徹底解説

    Windows 10が多くのユーザーに支持されている理由のひとつは、自分のニーズや好みに合わせて細かくカスタマイズできる点にあります。壁紙の変更からアクセントカラーの選択まで、豊富な設定オプションが用意されています。中でもスタートメニューとタスクバーは、最もよく目にするUI要素であり、これらも思い通りにカスタマイズ可能です。この記事では、Windows 10でタスクバーの色を変更する方法を、初心者の方にもわかりやすく丁寧に解説します。 Windows 10でタスクバーの色を変更する手順 まず押さえておきたいポイントとして、タスクバーの色を変更できる機能はWindows 10 バージョン19

  2. Windows 11でタスクバーの色を変更する方法【アクセントカラーの設定も解説】

    毎日使うパソコンのタスクバー、いつも同じ色では少し物足りないと感じていませんか？ ご安心ください！ この記事では、Windows 11でタスクバーの色を変更する方法を、初心者の方にもわかりやすく丁寧に解説します。あわせてアクセントカラーの設定方法や、色が変更できないときの対処法についてもご紹介します。 それでは始めましょう。 Windows 11の主な特徴 Windows 11は、これまでのWindowsの中でも最も注目されたバージョンです。モダンで洗練されたデザインと数々の新機能により、操作性が大きく向上しました。 生産性を高める機能も豊富に搭載されており、複数の作業を一つの画面で同時に進