Cara menunda tampilan tombol radio di input table hingga dipilih atau mouse hover

pilih jenis kalimat, lingkarannya jangan tampil dulu di awal, baru muncul kalau dipilih atau mouse ada di atasnya

https://form.jotform.com/252818571311455

Hi Forda,

Terima kasih telah menghubungi Dukungan Jotform. Jika Anda ingin lingkaran pada input table tidak langsung tampil di awal dan baru muncul ketika dipilih atau ada muse di atasnya, Anda dengan menyisipkan kode CSS ke formulir Anda. Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* Reset warna bawaan*/

#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 */

#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: #ff6b00 !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 */

#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: #ff6b00 !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: #ff6b00 !important;

}



/* Kolom 3 */

#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: #ff6b00 !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: #ff6b00 !important;

}



/* Kolom 4 */

#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: #ff6b00 !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: #ff6b00 !important;

}



/* Kolom 5 */

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