Cara mempercantik checkbox dengan css
Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article) Show 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 ProsesBacaan 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 2. Mempersiapkan HTMLSekarang, 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 Saya juga akan menambahkan 3. Tujuan Kita Berada Di Sini: CSSDi 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. Sprite sheet kitaDi 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 BerfungsiTidak 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 Catatan Singkat Pada Dukungan BrowserPseudo selector memiliki dukungan yang bagus pada sepanjang browser, namun peringatan yang biasa berlaku, dan fallbacknya cukup bagus: Data Can I Use untuk pseudo selector umumFallback: IE9 pada Windows 7Browser mobile versi awal juga mendapatkan permasalahan - dukungan KesimpulanBaiklah, jadi kita sudah selesai bukan? Nah mari kita periksa ulang. Pertama mengenai HTML: Apakah punyamu tampak sama? Jangan lupa
menambahkan 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
Saya harap kamu menikmati artikel pendek ini dan saya harap kamu mengambil apa yang kamu lihat di sini dan mengembangkan atau meningkatkannya! |