javascript - 仅使用 CSS 更改按钮单击的背景？

Question

<分区>

Answer 1

基于我在评论中发布的 fiddle ，我对其进行了轻微修改以使用 Bootstrap 按钮 CSS。

只需包含 Bootstrap 的 CSS 文件，然后使用下面的代码。

HTML

<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>

CSS

div {
    width: 100%;
    height: 100%;
    background: #5CB85C;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
label.btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2; 
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"]:checked + div{
    background: #5BC0DE;
}

这使用了 adjacent sibling selector .

它在这里工作:http://jsfiddle.net/eYgdm/ (我添加了 *-user-select: none; 以防止选择标签文本，但这并不是标签工作所必需的)

浏览器支持

Chrome、Firefox [桌面和移动] (Gecko) ≥ 1.0、Internet Explorer ≥ 7、Opera ≥ 9 和 Safari ≥ 3 引用文献:Attribute selectors和 Adjacent sibling selectors