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

画像置換によるカスタム CSS チェックボックスのスタイル

CSS を使用して、デフォルトのチェックボックスの外観をカスタム画像に置き換える際に、ハードルが発生しました。 CSS Ninja チュートリアルを使用しているにもかかわらず、望ましい結果を達成するのは依然として困難に直面しています。

明確にするために、このテクニックには、チェックボックス自体ではなく、チェックボックスに関連付けられたラベルのスタイル設定が含まれます。これにより、イメージを完全にカスタマイズできます。ただし、ネイティブの外観が表示されないように、実際のチェックボックス要素を非表示にする必要があります。

指定した CSS の内訳は次のとおりです。

td:not(#foo) > input[type=checkbox] + label {
    background: url('/images/off.png') 0 0px no-repeat;
    height: 16px;
    padding: 0 0 0 0px;
}

この CSS は、直接関連付けられたラベルをターゲットとしています。 ID「foo」を持たないテーブルのセルにチェックボックスが含まれています。ラベルの背景画像を「off.png」に設定し、高さとパディングを指定して、画像を左上隅に配置します。

「オン」状態を設定するには、次の CSS を使用します。

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

以前と同じ要素をターゲットにしますが、チェックボックスがチェックされた状態にある場合のみです。このルールは、ラベルの背景画像を「on.png」に更新します。

完全な例:

次の完全なコードとデモを参照してください:

• 要点: http://gist.github.com/592332
• JSFiddle: http://jsfiddle.net/4huzr/

キーポイント:

• 表示プロパティを に設定して、チェックボックスを常に非表示にします。 "none"。
• CSS セレクター構文を使用して、関連付けられたラベルのスタイルを設定します。
• チェックされた状態とチェックされていない状態を区別するには、「:checked」疑似クラスを使用します。
• 必ず設定してください背景画像のサイズとラベル スタイル内の位置。

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