Apply Gradient Color Style to Radio Buttons

Hi Elfina,

Terima kasih telah menghubungi Dukungan Jotform. Jika Anda ingin menerapkan gaya gradasi warna pada tombol pilihan yang ada pada formulir Anda saat ini, Anda dengan menyisipkan kode CSS ke formulir Anda. Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* Reset warna bawaan */

:is(#cid_13, #cid_14, #cid_16) .form-matrix-values .form-radio+label:after {

  background: transparent !important;

}

:is(#cid_13, #cid_14, #cid_16) .form-matrix-values .form-radio+label:before {

  border-color: transparent !important;

}



/* Variabel warna per kolom */

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

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

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

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

:is(#cid_13, #cid_14, #cid_16) 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_13, #cid_14, #cid_16) td.form-matrix-values .form-radio:checked+label:after,

:is(#cid_13, #cid_14, #cid_16) td.form-matrix-values .form-radio+label:hover:after {

  background: var(--g) !important;

}

:is(#cid_13, #cid_14, #cid_16) td.form-matrix-values .form-radio:checked+label:before {

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

}

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.

Saya sudah menambah pilihan baru, gimana caranya biar sama seperti yang lain?

Hi Elfina,

Saya cek formulir Anda dan ada penambahan pilihan baru dengan #cid_19 dan pilihan yang lebih sedikit. Untuk memiliki format yang sama, Anda dapat menambahkan #cid_19 ke kode CSS yang mengatur Variabel Warna Perkolom, seperti ini:

/* Variabel warna per kolom */

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

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

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

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

:is(#cid_13, #cid_14, #cid_16, #cid_19) 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_13, #cid_14, #cid_16, #cid_19) td.form-matrix-values .form-radio:checked+label:after,

:is(#cid_13, #cid_14, #cid_16, #cid_19) td.form-matrix-values .form-radio+label:hover:after {

 background: var(--g) !important;

}

:is(#cid_13, #cid_14, #cid_16, #cid_19) td.form-matrix-values .form-radio:checked+label:before {

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

}

Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:

Cobalah dan beritahu kami bagaimana hasilnya.

Hi Elfina,

Untuk menjaga percakapan tetap teratur, saya memindahkan pertanyaan Anda yang lain ke thread terpisah, dan seseorang dari Tim Dukungan kami akan membantu Anda di sana.

Terima kasih atas kesabaran Anda, kami sangat menghargainya.

Hi Elfina,

Our Indonesian Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Indonesian, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, to keep the conversation organized, I moved your other question to its own thread, and someone from our Support Team will help you with it here.

Reach out again if you need any help.