Pure CSS を使用してデフォルトのチェックボックス画像をカスタムのオン/オフ画像に置き換える方法

純粋な CSS チェックボックス画像の置換

チェックボックス リストについて、CSS を使用してデフォルトのチェックボックス画像をカスタムのオン/オフ画像に置き換えることを目的としています。 .

これを達成するには、次の手順に従います。手順:

1. 元のチェックボックスを非表示にする:

   • CSS 表示を使用する: なし。

2. カスタム ラベルの作成:

   • 非表示のチェックボックスの隣にラベルを配置します。ラベル入力を使用します。
   • このラベルは、カスタムの表示を担当します。画像。

3. 背景画像を使用してラベルをスタイルする:

   • 背景画像と入力を使用する[type=checkbox] ]:オンとオフを切り替える擬似クラスをチェックしました

4. 画像を正しく配置します:

   • background-position プロパティを調整して、画像を正しく配置します。 label.

完全な CSS コード例:

input[type=checkbox] {
  display: none; /* Hide the checkbox */
}

input[type=checkbox] + label {
  display: inline-block; /* Position the label next to the checkbox */
  width: 16px; /* Width of the label = Width of the checkboxes */
  height: 16px; /* Height of the label = Height of the checkboxes */
  background-image: url('/images/off.png'); /* Default to "off" image */
  background-position: 0 0;
}

input[type=checkbox]:checked + label {
  background-image: url('/images/on.png'); /* Change image to "on" image when checked */
}

注: へのパスがカスタムイメージは正しいです。完全な動作例については、提供されている JavaScript Fiddle と Gist を参照してください。

以上がPure CSS を使用してデフォルトのチェックボックス画像をカスタムのオン/オフ画像に置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。