Merubah Tampilan Checkbox dengan CSS

Checkbox adalah salah satu elemen yang ada pada form HTML. Checkbox ini berfungsi untuk membuat sebuah pilihan, dimana pilihan tersebut bisa kalian isi lebih dari satu opsi. Tentu fungsi ini akan sangat berguna jika kalian memiliki sebuah website dengan form yang berisikan pertanyaan seperti kuisioner yang memiliki jawaban lebih dari satu. Dengan adanya checkbox diharapkan dapat memudahkan kalian dalam membuat data. Checkbox sendiri memiliki tampilan standart seperti pada umumnya, hanya berbentuk kotak yang bisa di ceklis dan disampingnya ada teks sebagai label.

Lalu bagaimana jika kita ingin merubah tampilan checkbox dengan kreasi kita sendiri ? Jawabanya bisa, seperti pada pembahasan kali ini kita akan mencoba merubah tampilan checkbox dengan CSS. Dengan bantuan CSS ini kita akan mengakali agar tampilan checkbox tidak terlihat kaku, melainkan menjadi suatu hal yang menarik dan mudah dipahami oleh penggunanya. Oke langsung saja kita mulai, kalian bisa ikuti contoh code dibawah ini. Pertama buat file HTML dan salin code ini.

index.html

<!DOCTYPE HTML>
<head>
	<title>Checkbox</title>
    
</head>

<body>

<div>
  <input type="checkbox" id="option"/>
  <label for="option"> <span></span> Check and Uncheck Me </label><br>
  <input type="checkbox" id="option2"/>
  <label for="option2"> <span></span> Check and Uncheck Me </label><br>
  <input type="checkbox" id="option3"/>
  <label for="option3"> <span></span> Check and Uncheck Me </label>
</div>

</body>
</html>

Setelah itu kalian buat file cssnya seperti ini.

body {
          font-family: "Verdana", sans-serif;
          background-color: #eee;
          padding: 50px;
          font-size: 30px;
        }
        input[type="checkbox"] {
            display: none;
        }
        label {
          cursor:pointer;
          color: #555;
        }
        input[type="checkbox"]:checked + label {
          color: red;
        }

Jadi struktur CSSnya bisa kalian pisah atau dalam satu file dengan HTML. Jika satu file dengan HTML maka strukturnya jadi seperti ini

<!DOCTYPE HTML>
<head>
	<title>Checkbox</title>
        <style> kode CSS </style>
</head>

Jika sudah kalian simpan, dan lihat hasilnya pada browser kalian. Tampilanya akan seperti gambar dibawah ini.

Gambar diatas adalah tampila checkbox pada umumnya. Setelah kita akali dengan CSS maka tampilanya seperti ini.

Saat di checked teksnya akan berubah warna, itu menandakan bahwa pilihan tersebut telah kita pilih. Mudah bukan?

Sekian pembahasan mengenai merubah tampilan checkbox dengan CSS. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *