tetapi gaya itu tidak digunakan. Kotak pilihan masih memaparkan gaya lalainya. Bagaimana untuk memberikan gaya tertentu?">
Petua CSS: Cara Menggayakan Kotak Semak Menggunakan CSS-Soal Jawab Rangkaian PHP Cina
Dengan menggunakan fungsi baharu yang disertakan dengan:after和:beforekelas pseudo, anda boleh mencapai kesan kotak pilihan tersuai yang sangat hebat. Kelebihan ini ialah anda tidak perlu menambah apa-apa lagi pada DOM, hanya kotak semak standard.
Sila ambil perhatian bahawa ini hanya berfungsi pada penyemak imbas yang serasi. Saya percaya ini ada kaitan dengan sesetengah penyemak imbas yang tidak membenarkan anda menetapkan:after和:beforepada elemen input. Malangnya, ini bermakna pada masa ini hanya pelayar WebKit yang disokong. Firefox + Internet Explorer masih membenarkan kotak semak berfungsi, hanya tanpa penggayaan, yang dijangka akan berubah pada masa hadapan (kod tidak menggunakan awalan vendor).
Ini hanyalah penyelesaian penyemak imbas WebKit (Chrome, Safari, penyemak imbas mudah alih)
Jawapan di bawah merujuk kepada situasi sebelum CSS 3 digunakan secara meluas. Dalam penyemak imbas moden, termasuk Internet Explorer 9 dan lebih baru, lebih mudah untuk membuat penggantian kotak pilihan dengan gaya kegemaran anda, tanpa menggunakan JavaScript.
Perlu diingat bahawa masalah asas tidak berubah. Anda masih tidak boleh menggunakan gaya (sempadan, dsb.) terus pada elemen kotak pilihan dan gaya tersebut mempengaruhi paparan kotak semak HTML. Apa yang telah berubah, bagaimanapun, ialah kini mungkin untuk menyembunyikan kotak semak sebenar dan menggantikannya dengan elemen gaya anda sendiri, hanya menggunakan CSS. Khususnya, memandangkan CSS kini telah menyokong:checkedpemilih secara meluas, anda boleh membuat penggantian dengan betul menggambarkan keadaan kotak yang ditandai.
Jawapan lama
Ini ialahartikel bergunatentang Menggayakan Kotak Pilihan. Pada asasnya, pengarang ini mendapati bahawa ia sangat berbeza antara penyemak imbas, dan tidak kira bagaimana anda menggayakannya, banyak penyemak imbas sentiasa menunjukkan kotak pilihan lalai. Jadi sebenarnya bukan cara yang mudah.
Tidak sukar untuk membayangkan penyelesaian di mana anda boleh menggunakan JavaScript untuk menindih imej pada kotak pilihan, dan kemudian mengklik pada imej menyebabkan kotak semak sebenar ditandakan. Pengguna tanpa JavaScript akan melihat kotak pilihan lalai.
Diedit untuk menambah: Berikut ialahskrip bagus yang melakukan ini untuk anda; ia menyembunyikan elemen kotak semak sebenar, menggantikannya dengan skop yang digayakan dan mengubah hala acara klik.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dengan menggunakan fungsi baharu yang disertakan dengan
:after和:beforekelas pseudo, anda boleh mencapai kesan kotak pilihan tersuai yang sangat hebat. Kelebihan ini ialah anda tidak perlu menambah apa-apa lagi pada DOM, hanya kotak semak standard.Sila ambil perhatian bahawa ini hanya berfungsi pada penyemak imbas yang serasi. Saya percaya ini ada kaitan dengan sesetengah penyemak imbas yang tidak membenarkan anda menetapkan
:after和:beforepada elemen input. Malangnya, ini bermakna pada masa ini hanya pelayar WebKit yang disokong. Firefox + Internet Explorer masih membenarkan kotak semak berfungsi, hanya tanpa penggayaan, yang dijangka akan berubah pada masa hadapan (kod tidak menggunakan awalan vendor).Ini hanyalah penyelesaian penyemak imbas WebKit (Chrome, Safari, penyemak imbas mudah alih)
Lihat contoh Fiddle
$(function() { $('input').change(function() { $('div').html(Math.random()); }); });/* Main Classes */ .myinput[type="checkbox"]:before { position: relative; display: block; width: 11px; height: 11px; border: 1px solid #808080; content: ""; background: #FFF; } .myinput[type="checkbox"]:after { position: relative; display: block; left: 2px; top: -11px; width: 7px; height: 7px; border-width: 1px; border-style: solid; border-color: #B3B3B3 #dcddde #dcddde #B3B3B3; content: ""; background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); background-repeat: no-repeat; background-position: center; } .myinput[type="checkbox"]:checked:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); } .myinput[type="checkbox"]:disabled:after { -webkit-filter: opacity(0.4); } .myinput[type="checkbox"]:not(:disabled):checked:hover:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); } .myinput[type="checkbox"]:not(:disabled):hover:after { background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); border-color: #85A9BB #92C2DA #92C2DA #85A9BB; } .myinput[type="checkbox"]:not(:disabled):hover:before { border-color: #3D7591; } /* Large checkboxes */ .myinput.large { height: 22px; width: 22px; } .myinput.large[type="checkbox"]:before { width: 20px; height: 20px; } .myinput.large[type="checkbox"]:after { top: -20px; width: 16px; height: 16px; } /* Custom checkbox */ .myinput.large.custom[type="checkbox"]:checked:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); } .myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); }Selak biola gaya Webkit tambahan
$(function() { var f = function() { $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)'); }; $('input').change(f).trigger('change'); });body { font-family: arial; } .flipswitch { position: relative; background: white; width: 120px; height: 40px; -webkit-appearance: initial; border-radius: 3px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; font-size: 14px; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; cursor: pointer; border: 1px solid #ddd; } .flipswitch:after { position: absolute; top: 5%; display: block; line-height: 32px; width: 45%; height: 90%; background: #fff; box-sizing: border-box; text-align: center; transition: all 0.3s ease-in 0s; color: black; border: #888 1px solid; border-radius: 3px; } .flipswitch:after { left: 2%; content: "OFF"; } .flipswitch:checked:after { left: 53%; content: "ON"; }Kemas kini:
Jawapan di bawah merujuk kepada situasi sebelum CSS 3 digunakan secara meluas. Dalam penyemak imbas moden, termasuk Internet Explorer 9 dan lebih baru, lebih mudah untuk membuat penggantian kotak pilihan dengan gaya kegemaran anda, tanpa menggunakan JavaScript.
Berikut adalah beberapa pautan berguna:
Perlu diingat bahawa masalah asas tidak berubah. Anda masih tidak boleh menggunakan gaya (sempadan, dsb.) terus pada elemen kotak pilihan dan gaya tersebut mempengaruhi paparan kotak semak HTML. Apa yang telah berubah, bagaimanapun, ialah kini mungkin untuk menyembunyikan kotak semak sebenar dan menggantikannya dengan elemen gaya anda sendiri, hanya menggunakan CSS. Khususnya, memandangkan CSS kini telah menyokong
:checkedpemilih secara meluas, anda boleh membuat penggantian dengan betul menggambarkan keadaan kotak yang ditandai.Jawapan lama
Ini ialahartikel bergunatentang Menggayakan Kotak Pilihan. Pada asasnya, pengarang ini mendapati bahawa ia sangat berbeza antara penyemak imbas, dan tidak kira bagaimana anda menggayakannya, banyak penyemak imbas sentiasa menunjukkan kotak pilihan lalai. Jadi sebenarnya bukan cara yang mudah.
Tidak sukar untuk membayangkan penyelesaian di mana anda boleh menggunakan JavaScript untuk menindih imej pada kotak pilihan, dan kemudian mengklik pada imej menyebabkan kotak semak sebenar ditandakan. Pengguna tanpa JavaScript akan melihat kotak pilihan lalai.
Diedit untuk menambah: Berikut ialahskrip bagus yang melakukan ini untuk anda; ia menyembunyikan elemen kotak semak sebenar, menggantikannya dengan skop yang digayakan dan mengubah hala acara klik.