Pure CSS を使用してデフォルトのチェックボックス画像をカスタムのオン/オフ画像に置き換えるにはどうすればよいですか?

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

チェックボックス リストを含む HTML テーブルでは、デフォルトのチェックボックス画像をカスタムのオン/オフ画像に置き換えることができます。 CSS を活用すると、この美的強化を実現できます。

CSS カスタム入力テクニック

「CSS ninja」で述べたように、1 つのアプローチでは、疑似クラスを使用して、チェックボックスに関連付けられたラベルのスタイルを設定します。チェックボックス自体ではなく。これにより、画像が正しい位置に表示され、チェックボックスの状態に応答することが保証されます。

CSS コードの実装

以下に示すのは、実際のチェックボックスを非表示にし、チェックボックスを関連付ける完全な CSS コードです。スタイル付きラベル:

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  display: block;
  width: 16px;
  height: 16px;
  background: url('/images/off.png') 0 0px no-repeat;
}

input[type="checkbox"]:checked + label {
  background: url('/images/on.png') 0 0px no-repeat;
}

以下にその内訳を示します。 code:

• チェックボックス (input[type="checkbox"]) は、display: none; を使用して非表示になります。
• チェックボックスに関連付けられたラベル (input[type="checkbox"]) "] ラベル) は、ブロック表示、幅と高さ 16 ピクセル、および「オフ」状態の画像の背景画像を持つようにスタイル設定されています。
• チェックボックスがチェックされている (input[type="checkbox"]:checked)、「オン」状態の画像の新しい背景画像がラベルに適用されます。

結果

これCSS コードは、デフォルトのチェックボックス画像をカスタムのオン/オフ画像に置き換えて、より視覚的に魅力的でカスタマイズ可能なチェックボックス リストを提供します。特定の Web デザインの美学に合わせて、さまざまな画像デザインを試すことができます。

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