2

この質問で説明されているように、チェックボックスにカスタム画像を使用しようとしています:

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

私のチェックボックスはグリッドに表示されるので、ラベルを関連付ける必要はありません。ただし、ラベルが存在しない場合、その質問で説明されている手法は機能しないことがわかりました。

たとえば、関連する CSS は次のとおりです。

input[type=checkbox] {
    opacity: 0;
}

input[type=checkbox]  {
    height: 17px;
    width: 17px;
    background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat;
}

input[type=checkbox]:checked {
    background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat;
    height: 17px;
    width: 17px;
    padding: 0 0 0 0px;
}

シンプルに宣言inputしても、画像はレンダリングされません。

<input type="checkbox">

ただし、ソリューションで説明されているように、css を変更して+ labelを追加し、マークアップにラベルを追加すると、次のように機能します。

input[type=checkbox] {
    opacity: 0;
}

input[type=checkbox] + label {
    height: 17px;
    width: 17px;
    background: url('/resources/img/checkBox-unchecked.png') 0 0px no-repeat;
}

input[type=checkbox]:checked + label  {
    background: url('/resources/img/checkBox-checked.png') 0 0px no-repeat;
    height: 17px;
    width: 17px;
    padding: 0 0 0 0px;
}

<input type="checkbox"><label></label>

これは期待どおりにレンダリングされます。

最初の解決策が機能しないのはなぜですか?

不要なラベルを追加せずにこれを達成するにはどうすればよいですか?

4

2 に答える 2

3

最初の例では、次のものを残しました。

input[type=checkbox] {
    opacity: 0;
}

それはそれを「レンダリングしない」ようにします。

さて、そのささいな小さなスタイルを取り除いたので、あなたはおそらく尋ねるでしょう

さて、コントロールが表示されるようになりました...では、背景画像が表示されないのはなぜですか?

これは、ラジオ ボタン、チェック ボックス、コンボ ボックス、ファイル アップロード コントロールなどのスタイルを実際に制御できないためです。ラベル ソリューションが機能するのは、css を最大限に活用してラベルのスタイルをうまく設定できるからです。私が言及したコントロール？それほどでもない...

于 2012-06-01T02:42:12.367 に答える
0

私は専門家ではありませんが、すべての入力チェックボックスを不透明度 0 に設定すると、チェックボックス全体が効果的に非表示になりませんか? この投稿に記載されている方法を試してみてください: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

于 2012-06-01T02:46:44.477 に答える