Mengubah Nilai Properti CSS dengan Checkbox

Tutorial kali ini merupakan tutorial yang cukup menarik untuk disimak. Karena kita akan bermain-main lagi dengan kode CSS. Tutorial kali ini saya beri judul Mengubah Nilai Properti CSS dengan Checkbox.

Sebelum membahas bagaimana caranya, sebaiknya sobat mengetahui terlebih dahulu bagian atau struktur dari suatu kode CSS. Struktur dari kode CSS dapat sobat lihat melalui gambar di bawah ini.

Untuk mengubah nilai properti dari CSS sebenarnya ada banyak cara, diantara cara yang pernah saya gunakan adalah menggunakan kode jQuery atau JavaScript dan juga dengan cara menambahkan style di dalam tag html. Dan baru-baru ini saya belajar hal baru lagi tentang bagaimana cara mengubah nilai properti dari CSS yakni dengan menggunakan form input checkbox.

Cara Mengubah Nilai Properti CSS dengan Checkbox

Sebelum kita membahas mengenai caranya, sobat terlebih harus mengetahui jika checkbox memiliki 2 nilai atau value yakni checked (dicentang) dan unchecked (tidak dicentang) nilai default dari checkbox adalah unchecked. Jadi kita akan mengubah nilai properti CSS saat checkbox kondisi dicentang dan saat kondisi tidak dicentang. Bagaimana caranya? Silahkan ikuti langkah-langkanya di bawah ini.

1. Pertama-tama kita buat dulu kode CSS nya. Misalkan kita akan membuat sebuah element persegi panjang dengan menggunakan CSS berikut.

.kotak{ display: flex;align-items: center;justify-content: center;background: #2C415D; 
font-family: Roboto;height: 150px;width: 100%;text-align: center;color: #fff;
font-size: 30px;font-weight: bold} label{margin:0 10px 0 5px}

2. Kemudian buat kode htmlnya untuk menampilkan persegi panjang ditambah 2 buah checkbox.

<h3>::Checked Selector Example 1</h3> 
<br /><br /> 
<input id="merah" type="checkbox" /><label> Ubah Warna Background </label> 
<input id="word" type="checkbox" /> <label> Ubah Warna Tulisan </label> 
<br /><br /> 
<div class="kotak"> MR JUN </div>

3. Disini selector yang akan kita ubah nilai valuenya adalah .kotak maka tambahkan kode CSS berikut.

#merah: checked ~ .kotak{background: #BF4E4E} 
#word: checked ~ .kotak{color:#28C7A9}

Keterangan:

#merah dan #word merupakan id dari checkbox
checked merupakan kondisi ketika checkbox dicentang
.kotak merupakan selector yang dipilih untuk diubah valuenya. Pada kode CSS di atas value yang diubah yakni value dari properti background dan properti color.

Untuk unchecked maka kode CSS dengan tulisan checked akan diubah menjadi not(:checked)

#merah: not(:checked) ~ .kotak{background: #BF4E4E} 
#word: not(:checked) ~ .kotak{color:#28C7A9}

4. Dan yang terakhir silahkan dicoba dan lihat hasilnya.

Sobat dapat juga melakukan sedikit kreativitas agar dapat mengubah nilai properti dengan cara mengganti checkbox tersebut dengan menggunakan sebuah button yang dibentuk dari tag label(bisa dilihat di halaman demo).

Untuk melihat demonya silahkan klik link demo berikut

Demo 1 Demo 2 Full Demo

Mungkin penjelasan di atas masih kurang jelas. Oleh karena itu jangan sungkan-sungkan untuk menanyakannya di kolom komentar.

Baca juga :

• Text Efect Tombol Keyboard dengan CSS3 Pada Tulisan Blog
• Cara Membuat Sudut Lengkung Pada Garis Border
• Cara Membuat Tulisan Di Blog Menjadi 3 Kolom dengan CSS3
• Cara Membuat Template Website dengan Notepad++
• Cara Menampilkan dan Menyembunyikan Widget Di Halaman Tertentu

Demikian tutorial tentang bagaimana cara Mengubah Nilai Properti CSS dengan Checkbox. Semoga bermanfaat dan tunggu postingan menarik lainnya di blog ini. Terimakasih salam blogging :)