Terapkan gaya warna gradien pada tombol radion di input table yang berbeda jumlah kolom

kesan anda terhadap kuis ini, mempunyai kolom yang lebih sedikit, bagaimana bisa juga ada gradasi warna

https://www.jotform.com/build/252818571311455

Hi Forda,

Terima kasih telah menghubungi Dukungan Jotform. Saya cek formulir Anda dan ada penambahan pilihan baru dengan #cid_36 yang memiliki jumlah kolom lebih sedikit. Untuk memiliki format yang sama, Anda dapat menambahkan #cid_36 ke kode CSS yang mengatur Variabel Warna Perkolom, Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* warna gradien tombol radio di input table*/

:is(#cid_34, #cid_35, #cid_36) .form-matrix-values .form-radio+label:after {

background: transparent !important;

}

:is(#cid_34, #cid_35, #cid_36) .form-matrix-values .form-radio+label:before {

border-color: transparent !important;

}



/* Variabel warna per kolom */

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values:nth-of-type(1) { --c:#0044cc; --g:linear-gradient(135deg,#0044cc 0%,#66a3ff 100%); }

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values:nth-of-type(2) { --c:#66a3ff; --g:linear-gradient(135deg,#66a3ff 0%,#ffc400 100%); }

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values:nth-of-type(3) { --c:#ffc400; --g:linear-gradient(135deg,#ffc400 0%,#ff9f00 100%); }

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values:nth-of-type(4) { --c:#ff9a00; --g:linear-gradient(135deg,#ff9a00 0%,#ff6b00 100%); }

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values:nth-of-type(5) { --c:#ff6b00; --g:linear-gradient(135deg,#ff6b00 0%,#ff2d00 100%); }



/* Satu aturan untuk semua kolom */

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values .form-radio:checked+label:after,

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values .form-radio+label:hover:after {

background: var(--g) !important;

}

:is(#cid_34, #cid_35, #cid_36) td.form-matrix-values .form-radio:checked+label:before {

border-color: var(--c) !important;

}

/*berakhir di sini */

2. Di Pembangun Formulir, klik ikon Rol Cat di sisi kanan halaman untuk membuka Perancang Formulir.

3. Sekarang, di menu Perancang Formulir, klik tab Gaya, gulir ke bawah, lalu tempelkan kode ke dalam kotak Suntik Kode CSS. Selesai. Kode akan tersimpan secara otomatis.

Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:

Cobalah dan beritahu kami bagaimana hasilnya.