mardi 26 mai 2015

How can I change the background color of a button when clicked?

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