Cara membuat tombol radion punya warna gradasi dari biru ke merah

pilih jenis kalimat, tiap tombol punya warna berbeda, gradasi dari biru ke merah

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

Hi Forda,

Terima kasih telah menghubungi Dukungan Jotform. Bila Anda ingin lingkaran memiliki warna berbeda dan bergradien, Anda dengan menyisipkan kode CSS ke formulir Anda. Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* warna gradien tombol radion di input table*/

#cid_34 .form-matrix-values .form-radio+label:after { background: transparent !important; }

#cid_34 .form-matrix-values .form-radio+label:before { border-color: transparent !important; }



/* Kolom 1 (paling kiri) - biru tua → biru muda */

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio:checked+label:after,

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio+label:hover:after {

background: linear-gradient(135deg,#0044cc 0%,#66a3ff 100%) !important;

}

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(1) .form-radio:checked+label:before {

border-color: #0044cc !important;

}



/* Kolom 2 - biru muda → oranye */

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:after,

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio+label:hover:after {

background: linear-gradient(135deg,#66a3ff 0%,#ffc400 100%) !important;

}

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:before {

border-color: #66a3ff !important;

}



/* Kolom 3 - kuning-oranye → oranye */

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:after,

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio+label:hover:after {

background: linear-gradient(135deg,#ffc400 0%,#ff9f00 100%) !important;

}

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:before {

border-color: #ffc400 !important;

}



/* Kolom 4 - oranye → oranye kemerahan */

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:after,

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio+label:hover:after {

background: linear-gradient(135deg,#ff9a00 0%,#ff6b00 100%) !important;

}

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:before {

border-color: #ff9a00 !important;

}



/* Kolom 5 (paling kanan) - oranye kemerahan → merah */

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:after,

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio+label:hover:after {

background: linear-gradient(135deg,#ff6b00 0%,#ff2d00 100%) !important;

}

#cid_34 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:before {

border-color: #ff6b00 !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.