<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>
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); }