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

CSSでフォームの入力欄内にアイコンを配置する方法

CSSを使えば、フォームの入力要素（<input>）の中にアイコンを簡単に配置できます。この記事では、定番のアイコンフォントライブラリ「Font Awesome」を活用して、ユーザー名・メールアドレス・パスワードの各入力欄にアイコンを表示する方法を、実際のコード例とともにわかりやすく解説します。

実装例

<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
form {
    max-width: 450px;
    margin: auto;
}
.inputContainer i {
    position: absolute;
}
.inputContainer {
    width: 100%;
    margin-bottom: 10px;
}
.icon {
    padding: 15px;
    color: rgb(49, 0, 128);
    width: 70px;
    text-align: left;
}
.Field {
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}
</style>
</head>
<body>
<h1 style="text-align: center;">入力欄にアイコンを表示するサンプル</h1>
<form>
<div class="inputContainer">
<i class="fa fa-user icon"> </i>
<input class="Field" type="text" placeholder="Username" />
</div>
<div class="inputContainer">
<i class="fa fa-envelope icon"> </i>
<input class="Field" type="text" placeholder="Email" />
</div>
<div class="inputContainer">
<i class="fa fa-key icon"> </i>
<input class="Field" type="password" placeholder="Password" />
</div>
</form>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、次のように表示されます。

CSSでフォームの入力欄内にアイコンを配置する方法


コードのポイント解説

  • .inputContainer：アイコンと入力欄をグループ化するラッパー要素です。幅を100%にし、下方向に余白（margin-bottom）を設けてレイアウトを整えています。
  • .inputContainer i：アイコンに対してposition: absolute;を指定することで、通常のフローから外れ、入力欄の上に重ねて表示できるようになります。
  • .icon：アイコンの見た目を調整するクラスです。paddingで大きさを確保し、colorプロパティでアイコンの色を指定しています。
  • .Field：入力欄本体のスタイルです。text-align: center;で入力文字を中央寄せにすることで、左側に配置したアイコンと文字列が重なるのを防いでいます。

この手法を応用すれば、検索ボックスに虫眼鏡アイコンを付けたり、必須項目に視覚的な目印を加えたりするなど、フォームの使い勝手とデザイン性を大きく向上させることができます。ぜひ自分のプロジェクトでも試してみてください。

  1. CSSでアイコン付きフォームを作成する方法を初心者向けに解説

    Webサイトの会員登録フォームやログインフォームでは、入力欄の横にアイコンを表示すると、ユーザーが「何を入力すればよいのか」を直感的に把握でき、デザインの完成度も大きく向上します。本記事では、アイコンフォントライブラリ「Font Awesome」と、CSSのFlexbox（フレックスボックス）を組み合わせて、アイコン付きの入力フォームを作成する方法を、実際に動作するサンプルコード付きで解説します。実装のポイントFont AwesomeのCSSファイルをCDN経由で読み込むアイコンと入力欄をタグでまとめ、display: flex;で横並びに配置するアイコン部分と入力欄のパディング・フォントサイ

  2. フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選

    CSSには、フォームやテキスト入力に関連する便利でありながら、意外と知られていないプロパティがいくつか存在します。その代表例が caret-color、pointer-events、tab-size の3つです。 caret-color: テキスト入力時に点滅するキャレット(テキストカーソル)の色を自由に指定できます。 pointer-events: 要素へのマウス操作を無効化し、ユーザーがその要素をクリックしたり選択したりできないようにできます。 tab-size: タブ文字によって挿入される空白(ホワイトスペース)の幅を設定します。 以下に、これらのプロパティを使用した具体的なコード例