「input」要素をスタイリッシュに装飾：アイコン、プレースホルダー、エラーメッセージなどを追加

2024-07-27

HTMLとCSSで「input」要素の前後にコンテンツを生成する方法

デモ

以下の例では、「input」要素の前にチェックマークアイコンと、後にクリアボタンを追加する方法を示します。

<!DOCTYPE html>
<html>
<head>
<style>
  input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
  }

  input[type="text"]::before {
    content: " ";
    font-size: 20px;
    color: #ccc;
  }

  input[type="text"]::after {
    content: "×";
    font-size: 15px;
    color: #f00;
    cursor: pointer;
  }
</style>
</head>
<body>
  <input type="text" placeholder="名前を入力してください">
</body>
</html>

解説

::before 疑似要素と ::after 疑似要素を使用して、「input」要素の前後にコンテンツを挿入します。
content プロパティで、生成するコンテンツを指定します。この例では、チェックマークアイコンとクリアボタンの記号を設定しています。
フォントサイズ、色、カーソルなどを設定して、コンテンツのスタイルを調整します。

応用例

プレースホルダー: 入力欄が空の場合に、ヒントとなるテキストを表示します。
アイコン: 入力欄の種類を示すアイコンを表示します (例: ユーザーアイコン、パスワードアイコン)。
エラーメッセージ: 入力値にエラーがある場合に、エラーメッセージを表示します。
装飾: 入力欄を装飾したり、視覚的に目立たせるために、ボーダーや影を追加します。

注意点

一部の古いブラウザでは、CSS生成コンテンツがサポートされていない場合があります。
複雑なコンテンツを生成する場合は、パフォーマンスに影響を与える可能性があります。
アクセシビリティを考慮し、スクリーンリーダーなどの補助技術でもコンテンツが認識できるようにする必要があります。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <input type="text" id="nameInput" placeholder="名前を入力してください">
  <input type="email" id="emailInput" placeholder="メールアドレスを入力してください">
  <input type="password" id="passwordInput" placeholder="パスワードを入力してください">
</body>
</html>

CSS

/* 共通スタイル */
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 10px;
  border: 1px solid #ccc;
  width: 200px;
  margin-bottom: 10px;
}

/* プレースホルダー */
input[type="text"]::placeholder {
  color: #999;
}

/* アイコン */
input[type="text"]::before {
  content: " ";
  font-size: 20px;
  color: #ccc;
}

input[type="email"]::before {
  content: "@";
  font-size: 20px;
  color: #ccc;
}

input[type="password"]::before {
  content: "";
  font-size: 20px;
  color: #ccc;
}

/* クリアボタン */
input[type="text"]::after {
  content: "×";
  font-size: 15px;
  color: #f00;
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

/* フォーカス時スタイル */
input:focus {
  outline: none;
  border: 1px solid #007bff;
}

/* エラーメッセージ */
.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

3つの「input」要素を用意しました: 名前、メールアドレス、パスワード用です。
それぞれの「input」要素に、id 属性を設定しています。これは、CSSで個別にスタイルを適用するために使用します。
placeholder 属性を使用して、各入力欄にプレースホルダーテキストを設定しています。

共通スタイル: すべての「input」要素に、共通のスタイルを設定します。
- padding と border で、入力欄の外観を調整します。
- width で、入力欄の幅を設定します。
- margin-bottom で、入力欄同士の間隔を設定します。
プレースホルダー:
- ::placeholder 疑似要素を使用して、プレースホルダーテキストのスタイルを設定します。
- この例では、プレースホルダーテキストの色をグレー (#999) に設定しています。
アイコン:
- ::before 疑似要素を使用して、各入力欄の前にアイコンを挿入します。
- content プロパティで、アイコンとして使用する文字を設定します。
- font-size で、アイコンのサイズを設定します。
- color で、アイコンの色を設定します。
クリアボタン:
- cursor で、クリアボタンがカーソルポインタになったときに、カーソル形状を変更します。
- position と top、right プロパティを使用して、クリアボタンの位置を調整します。
- transform プロパティを使用して、クリアボタンを垂直方向に中央揃えします。
フォーカス時スタイル:
- `

利点:
- 動的なコンテンツを生成できます。
- ユーザーとのインタラクションに応じて、コンテンツを変化させることができます。
欠点:
- JavaScriptの知識が必要です。
- パフォーマンスに影響を与える可能性があります。

const input = document.getElementById('myInput');

input.addEventListener('focus', () => {
  const icon = document.createElement('span');
  icon.textContent = '';
  input.parentNode.insertBefore(icon, input);
});

input.addEventListener('blur', () => {
  const icon = input.parentNode.querySelector('span');
  if (icon) {
    input.parentNode.removeChild(icon);
  }
});