我做了很多研究,发现这个JSFiddle看起来就是我需要的,但是当我点击按钮时,页面背景改变了。我希望点击按钮时,改变的是按钮的颜色。
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;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]{
display: none;
}
input[type="checkbox"]:checked + div{
background: #5BC0DE;
}
label + input[type="checkbox"]:checked{
background: #000;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>
label + input[type="checkbox"]:checked
:) - Harry