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:
input[type="checkbox"]:checked + label {
}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.
Styled Check Box
Sekarang, dalam hal kamu tidak tahu banyak tentang elemen , kamu harus menghubungkan input dan label dalam urutan untuk interaksi dengan input melalui label. Ini dilakukan dengan menggunakan for="" dan ID input.
Check Box 1
Saya juga akan menambahkan 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.
input[type="checkbox"] {
display:none;
}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.
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
background:url[check_radio_sheet.png] left top no-repeat;
}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.
Di sini adalah CSS selebihnya, spesifik untuk styling saya. Ini murni untuk estetika dan spesifik untuk entah selera saya atau desain ini.
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url[check_radio_sheet.png] left top no-repeat;
cursor:pointer;
}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!
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url[check_radio_sheet.png] left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url[check_radio_sheet.png] -19px top no-repeat;
}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:
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:
Check Box 1
Apakah punyamu tampak sama? Jangan lupa
menambahkan 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:
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-2px 10px 0 0;
vertical-align:middle;
background:url[check_radio_sheet.png] left top no-repeat;
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
background:url[check_radio_sheet.png] -19px top no-repeat;
}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:
input[type="checkbox"]:checked + label {
}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!