1

私はこの仕事を得ることができません、不可能のように見えます、それが私が尋ねている理由です...

使用する CSS は次のとおりです。

label.btn {
    cursor:pointer;
    display:inline-block;
}
label.btn>input[type=checkbox] {
    display:none;
}
label.btn>input[type=checkbox]:checked~b {
    background:red;
}
/* not relevant, just for testing purpose */
#divtest { 
    margin-top:1500px
}

次の HTML コードは入力をチェックし、<b>タグのスタイルが適用されます。

<a href="#divtest" id="anchor">
    <label class="btn">
        <input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
    </label>
</a>

デモスタイリング

ラベルに属性「for」を追加してアンカータグをターゲットにすると、デフォルトのブラウザーのスクロールは機能しますが、それ以上のスタイルは適用されません:

<label class="btn" for="anchor">

デモアンカー

さて、明らかな質問：

これらの両方の動作を純粋な CSS で一緒に動作させることはできますか?

4

2 に答える 2

2

内のinput要素はa、HTML5 CR と同様に常識に違反しています。2 つのインタラクティブな要素をネストすると、マウス クリックでどの要素がアクティブになるかという問題が発生します。

このような構造の代わりに、有効で適切な HTML マークアップを使用してください。次に、「これは」「機能しない」と言うのではなく、望ましいまたは期待されるレンダリングと実際のレンダリングの観点からスタイリングの問題を定式化してください。

于 2013-07-30T17:48:53.460 に答える
2

Input:checkbox が の内側にあるため、これは機能しません<label>。ブラウザーは、ラベルをクリックすると入力にフォーカスを設定します。

于 2013-07-30T17:34:01.897 に答える