更改按钮单击背景，仅使用CSS？

基于我在评论中发布的小提琴，我对它进行了少许修改，以使用Bootstrap按钮CSS。

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

HTML

<label for="check" >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;}

这将使用相邻的兄弟选择器。

它在这里起作用：（我已经添加

*-user-select:none;

浏览器支持

Chrome，Firefox [Desktop＆Mobile]（Gecko）≥1.0，InternetExplorer≥7，Opera≥9和Safari≥3参考：属性选择器和相邻的同级选择器