:before および :after 疑似要素で入力フィールドを装飾する方法

2024-04-02

:before および :after 疑似要素と入力フィールド

:before および :after 疑似要素は、HTML要素の前後にコンテンツを挿入するために使用できます。これは、入力フィールドなどのフォーム要素にも適用できます。

使用例

入力フィールドの前にチェックボックスを挿入
入力フィールドの後にアスタリスク(*)を挿入して必須項目を示す
入力フィールドの横にスピンボタンを挿入して数値を調整

コード例

input[type="text"]::before {
  content: "✓";
  margin-right: 5px;
}

input[type="number"]::after {
  content: "個";
}

上記コードは、テキスト入力フィールドの前にチェックボックス、数値入力フィールドの後に「個」という文字を表示します。

注意点

すべてのブラウザで :before および :after 疑似要素がサポートされているわけではありません。
入力フィールドのデザインによっては、意図したとおりに表示されない場合があります。

補足

content プロパティで挿入するコンテンツは、テキストだけでなく、画像やアイコンなども使用できます。
position プロパティを使用して、挿入するコンテンツの位置を調整できます。

入力フィールドにエラーメッセージを表示
入力フィールドにフォーカスが当たっていることを示す
入力フィールドの入力内容をリアルタイムで検証

before および after 疑似要素は、入力フィールドのデザインや機能を拡張するのに役立ちます。

関連用語

HTML
CSS
疑似要素
入力フィールド
フォーム

<input type="text" name="name">

input[type="text"]::before {
  content: "✓";
  margin-right: 5px;
}

<input type="number" name="age" required>

input[type="number"]::after {
  content: "*";
  color: red;
}

<input type="number" name="quantity">

input[type="number"] {
  width: 50px;
}

input[type="number"]::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

input[type="number"]::after:hover {
  background-color: #ddd;
}

input[type="number"]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
  margin-right: 5px;
}

input[type="number"]::before:hover {
  background-color: #ddd;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

実行結果

解説

例1では、content プロパティを使用してチェックボックスの文字コードを挿入しています。
例2では、content プロパティと color プロパティを使用してアスタリスク(*)を赤色で表示しています。
例3では、content プロパティ、display プロパティ、width プロパティ、height プロパティ、border プロパティ、border-radius プロパティ、text-align プロパティ、cursor プロパティを使用してスピンボタンを作成しています。

:before および :after 疑似要素の代替方法

代替方法

HTML要素を使用する
- チェックボックスやアスタリスク(*)などのアイコンを表示するには、<i> タグなどのHTML要素を使用できます。
- スピンボタンを表示するには、<input type="button"> タグを使用できます。
JavaScriptを使用する

例

<input type="text" name="name">
<i class="fa fa-check"></i>

.fa-check {
  color: green;
  margin-left: 5px;
}

<input type="number" name="quantity">

const input = document.querySelector('input[name="quantity"]');

const spinButtonUp = document.createElement('button');
spinButtonUp.textContent = '+';
spinButtonUp.addEventListener('click', () => {
  input.value = parseInt(input.value) + 1;
});

const spinButtonDown = document.createElement('button');
spinButtonDown.textContent = '-';
spinButtonDown.addEventListener('click', () => {
  input.value = parseInt(input.value) - 1;
});

input.parentNode.appendChild(spinButtonUp);
input.parentNode.appendChild(spinButtonDown);

HTML要素を使用する例では、<i> タグと fa-check クラスを使用してチェックボックスアイコンを表示しています。
JavaScriptを使用する例では、querySelector メソッドを使用して入力フィールドを取得し、createElement メソッドを使用してスピンボタンを作成しています。

before および after 疑似要素はシンプルで使いやすい方法ですが、IE 7 などの古いブラウザではサポートされていない場合があります。

HTML要素を使用する方法は、すべてのブラウザでサポートされていますが、コード量が少し増えます。

JavaScriptを使用する方法は、最も柔軟な方法ですが、JavaScriptの知識が必要となります。

html css pseudo-element