I researched a lot, and I found this JSFiddle looks like what I need, but, when I click the button, the page background is changing. I want the button's color to be changed when clicked, instead.
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://ift.tt/1zOhBN9" rel="stylesheet"/>
<label for="check" class="btn btn-default">Toggle background colour</label>
<input type="checkbox" id="check" />
<div></div>
Aucun commentaire:
Enregistrer un commentaire