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:checkbox 在<label>. 浏览器将在单击标签时将焦点设置在输入上。

于 2013-07-30T17:34:01.897 回答
2

aninput内的元素a违反常识以及 HTML5 CR。嵌套两个交互式元素会引发鼠标单击时激活哪个元素的问题。

而不是这样的结构，使用有效和合理的 HTML 标记。然后请根据期望或预期渲染与实际渲染来制定样式问题，而不是说“这个”“不起作用”。

于 2013-07-30T17:48:53.460 回答