CSS

make input invisible but clickable css

/* 
<div class="main">
    <input type="checkbox" />
    <div></div>
</div>*/

.main {
    position: relative
}
.main > div {
    width: 200px;
    height: 200px;
    background: #f00;
}
input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
input:checked + div {
    background: #000
}