Change the size, weight, and color of the column label text

Bisa nggak sih bantuin aku buat ngubah ukuran fon, bikin tebel, terus mungkin kasih warna di label kolom? Pokoknya, aku pengen teks judul ukurannya agak gede, subjudul-nya agak lebih kecil, terus teks di kolom bawahnya lebih kecil lagi dan nggak ditebelin.

https://form.jotform.com/252207831628255

Hi Elfina,

Terima kasih telah menghubungi Dukungan Jotform. Anda dapat mengatur teks judul dengan satu ukuran, teks subjudul sedikit lebih kecil, dan teks di bawahnya sedikit lebih kecil serta tidak dicetak tebal dengan menyisipkan kode CSS ke formulir Anda. Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* Mengature teks judul */

.form-subHeader{font-size:19px!important;font-weight:500;color:#555;margin-bottom:4px}li[data-type="control_matrix"]>label.form-label{font-size:16px;font-weight:normal;color:#333;line-height:1.4;letter-spacing:.2px}.form-matrix-table th{background-color:#f9f9f9;padding:6px 8px}.form-matrix-table td{padding:6px 8px}.form-matrix-table td:hover

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

Oke makasihhh

Bisa ganti ke warna lain? Mungkin oranye

Hi Elfina,

Anda dapat menyisipkan kode CSS berikut ke formulir Anda. Mari saya jelaskan caranya:

1. Pertama, salin kode ini:

/* Mengubah warna border lingkaran dan isi lingkaran */

.form-radio:checked+label:before { 

   border-color: #e55300; 

} 



.form-radio+label:after { 

   background-color: #e55300; 

}

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

Kalau bisa, lingkarannya jangan tampil dulu di awal, baru muncul kalau dipilih.

Hi Elfina,

Bila Anda ingin lingkaran mucul saat dipilih saja, Anda dapat menambahkan kode CSS berikut ke formulir Anda:

/* Reset warna bawaan */

#cid_13 .form-matrix-values .form-radio+label:after {

  background: transparent !important;

}

#cid_13 .form-matrix-values .form-radio+label:before {

  border-color: transparent !important;

}

/* Kolom 1 */

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

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

  background: #ff6b00 !important;

}

#cid_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:after,

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

  background: #ff6b00 !important;

}

#cid_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:after,

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

  background: #ff6b00 !important;

}

#cid_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:after,

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

  background: #ff6b00 !important;

}

#cid_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:after,

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

  background: #ff6b00 !important;

}

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

  border-color: #ff6b00 !important;

}

Lihat tangkapan layar saya di bawah ini untuk melihat hasilnya:

Cobalah dan beritahu kami bagaimana hasilnya.

Oke, keren. Tolong tiap tombol diberi warna berbeda, misalnya gradasi dari biru ke merah untuk nilai kecil.

Hi Elfina,

Bila Anda ingin lingkaran memiliki warna berbeda dan bergradien, Anda dapat mengganti kode CSS sebelumnya dengan kode CSS berikut ke formulir Anda:

/* Reset warna bawaan */

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

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

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

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

#cid_13 .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_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(2) .form-radio:checked+label:after,

#cid_13 .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_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(3) .form-radio:checked+label:after,

#cid_13 .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_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(4) .form-radio:checked+label:after,

#cid_13 .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_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:after,

#cid_13 .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_13 .form-matrix-tr.form-matrix-value-tr td.form-matrix-values:nth-of-type(5) .form-radio:checked+label:before {

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

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.