Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Tip Singkat: Membuat Kotak Centang Dan Tombol Radio Dengan Mudah Pada CSS3

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Pernah bertanya-tanya bagaimana menggunakan kotak centang dan tombol radio, namun tanpa JavaScript? Berkat CSS3 kamu bisa! Berikut apa yang akan kita buat:

Jika kamu mencari beberapa grafis untuk digunakan dengan elemen UI, lihat pada UI kit yang tersedia dari Envato Elements. Jika tidak, ambil secangkir kopi dan mulai tutorial ini!

1. Memahami Proses

Bacaan Yang direkomendasikan: 30 CSS Selector Yang Harus Kamu Ingat

Bagi diantara kamu yang merasa percaya diri dalam kemampuan CSS dan hanya menginginkan dorongan dalam arah yang benar, berikut adalah baris CSS terpenting di dalam keseluruhan tutorial:

Sekarang, bagi diantara kamu yang merasa perlu arahan lebih lanjut, jangan takut, teruskan membaca!

Baiklah, jadi kembali ke topik sekarang. Apa tepatnya yang akan kita lakukan? Yah, berdasarkan pseudo selector CSS3 yang bagus :checked, kita dapat menargetkan elemen berdasarkan pada status centang (atau tidak centang). Kita kemudian dapat menggunakan selector + yang berdekatan dari CSS2.1 untuk menargetkan elemen secara langsung mengikuti kotak centang atau tombol radio, yang di dalam kasus kita adalah label.

2. Mempersiapkan HTML

Sekarang, kita mulai dengan membuat file HTML dan CSS (atau bagaimanapun yang kamu sukai dalam menangani style) dan mulai berkerja. Saya akan menganggap kamu tahu bagaimana melakukannya, sehingga kita tidak harus masuk ke situ.

Untuk tujuan menempatkanmu pada proses, saya hanya akan mendemonstrasikan teknik ini pada kotak centang, namun proses tombol radio identik, dan dicantumkan di dalam sumber.

Oke, mari kita benar-benar mulai. Kita mulai dengan membuat input kotak centang, diikuti dengan label.

Sekarang, dalam hal kamu tidak tahu banyak tentang elemen <label>, kamu harus menghubungkan input dan label dalam urutan untuk interaksi dengan input melalui label. Ini dilakukan dengan menggunakan for="" dan ID input.

Saya juga akan menambahkan <span> di dalam label, dimana ini lebih sebagai preferensi pribadi daripada yang lainnya, namun semuanya akan menjadi jelas dalam langkah 3.

3. Tujuan Kita Berada Di Sini: CSS

Di sini dimana kesenangannya dimulai. Hal pertama yang kita lakukan, yang menjadi dasar untuk keseluruhan tutorial ini, adalah menyembunyikan kotak centang sebenarnya.

Sekarang setelah itu selesai, kita dapat memberikan style pada label, namun lebih spesifik pada span di dalam label. Saya melakukannya dengan cara ini untuk memiliki lebih banyak kendali terhadap posisi kotak centang yang tepat. Tanpa itu kamu mungkin akan menggunakan gambar background di dalam label secara langsung, dan memposisikannya mungkin menjadi sulit.

Baiklah, mari saya jelaskan ini secara cepat. Pertama-tama, perhatikan background. Saya memiliki sprite sheet kecil untuk ini, sehingga yang perlu saya lakukan adalah mengatur posisi background pada span ini. Span itu sendiri adalah posisi lebar dan tinggi yang pasti untuk tiap "sprite" di dalam sheet, membuatnya mudah untuk menentukan tiap kondisi.

Our sprite sheet
Sprite sheet kita

Di sini adalah CSS selebihnya, spesifik untuk styling saya. Ini murni untuk estetika dan spesifik untuk entah selera saya atau desain ini.

4. Membuatnya Berfungsi

Tidak ada banyak kerja yang tersisa, jadi mari kita lengkapkan ini. Hal terakhir yang akan perlu kamu lakukan adalah menyediakan sebuah kondisi untuk elemen ketika input dicentang, dan secara opsional pada saat diarahkan. Ini cukup sederhana, lihat saja!

Perhatikan karena saya menggunakan sprite sheet, yang perlu saya lakukan adalah mengganti posisi background. Perhatikan juga, bahwa yang perlu saya lakukan untuk memberi style pada span label ketika kamu "mencentang" sebuah kotak centang / tombol radio, adalah menggunakan pseudo selector :checked.

Catatan Singkat Pada Dukungan Browser

Pseudo selector memiliki dukungan yang bagus pada sepanjang browser, namun peringatan yang biasa berlaku, dan fallbacknya cukup bagus:

Can I use data for pseudo selectors
Data Can I Use untuk pseudo selector umum
IE9 on Windows 7
Fallback: IE9 pada Windows 7

Browser mobile versi awal juga mendapatkan permasalahan - dukungan :checked tidak jelas. Mobile Safari pra iOS 6 tidak mendukung itu, sebagai contoh.

Kesimpulan

Baiklah, jadi kita sudah selesai bukan? Nah mari kita periksa ulang. Pertama mengenai HTML:

Apakah punyamu tampak sama? Jangan lupa menambahkan <span> itu! Ketika bereksperimen dengan ini sendiri, saya sangat menyarankan untuk menemukan cara baru atau berbeda dalam melakukan bagian ini. Saya akan suka melihat apa yang kamu temukan untuk membuatnya lebih efisien. Sekarang untuk CSS:

Semuanya ada? Sempurna. Ingatlah bahwa kebanyakan styling ini spesifik pada style yang saya buat untuk file demo. Saya mendorongmu untuk membuat sendiri, dan bereksperimen dengan penempatan dan penyajian.

Sebagai kesimpulan, hal paling penting yang dapat kamu bawa dari sini adalah baris pertama CSS yang saya tulis pada bagian paling atas:

Dengan menggunakan itu, kamu dapat membuat seluruh macam hal yang berbeda. Kemungkinan dengan :checked melebihi kotak centang dan tombol radio untuk digunakan dlm form, namun saya akan membiarkanmu bereksperimen sendiri. Beberapa hal untuk dilakukan eksperimen:

  • Menambahkan 2x spritesheet untuk layar retina
  • Mng SVG bukannya bitmap

Saya harap kamu menikmati artikel pendek ini dan saya harap kamu mengambil apa yang kamu lihat di sini dan mengembangkan atau meningkatkannya!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.