The Basic of CSS Checkbox Hack

by Taufik Nurrohman

HTML

<h3>Metode Baru</h3>
<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>
<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>
<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>
<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>
<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>
<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>
<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>

CSS

body {
    padding:50px;
}

div {
    position:relative;
    margin:0 0 5px;
}

label {
    display:block;
    padding:0 15px;
    line-height:30px;
    background-color:black;
    color:white;
}

div input {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    cursor:pointer;
}

/* Sikap aktif */
div input:checked + label {
    background-color:red;
}

/* Sembunyikan checkbox, namun pastikan tetap aksesibel */
div input {
    opacity:0;
    filter:alpha(opacity=0);
}