CSS-választók az Orbital téma választós mezőihez

Ez a fejezet az Orbital témájú űrlapok választós mezőinek stílusozását írja le: a Többválasztós, a Képkiválasztás és a Hozzájárulás mezőét. A régebbi, 2.5-ös témájú űrlapokra nem érvényes, ott a 2.5-ös téma mezőinek választóit használd.

A példák háromféle hatókörben mutatják a szabályt. Ezeket a saját űrlapodhoz igazítsd:

Hatókör	Minta	Mit cserélj
Minden Orbital űrlap	.gform-theme--framework .gfield--type-…	semmit
Egy űrlap	.gform-theme--framework#gform_wrapper_112 …	a 112 helyére az űrlap azonosítóját írd
Egy mező	.gform-theme--framework#gform_wrapper_112 #field_112_4	a 112 az űrlap, a 4 a mező azonosítója

Minden mező azonosítója field_{űrlap-azonosító}_{mező-azonosító} alakú, például field_5_3 az 5-ös űrlap 3-as mezője. A legtöbb beállítás CSS-változó: a változót a mezőre (vagy az űrlapra) állítod be, és az alatta lévő elemek öröklik. A változók teljes jegyzékét a CSS API leírása tartalmazza.

Többválasztós mező

A Többválasztós mező egyesíti a jelölőnégyzet és a rádiógomb mezőt. A Kiválasztások beállítás dönti el a megjelenését: az egy lehetőség választása rádiógombokat, a több lehetőség, a pontos szám és a tartomány jelölőnégyzeteket rajzol.

Az Orbital témában a lista tárolója div.gfield_checkbox vagy div.gfield_radio, minden lehetőség egy div.gchoice (nem ul/li, mint a régi témában). A rádiógomb és a jelölőnégyzet a böngésző saját elemei, ezért a kinézetük böngészőnként, eszközönként és rendszerenként eltérhet, és csak CSS-sel nem mindig szabhatók teljesen testre.

Tároló

A mező osztályai: .gfield, .gfield--type-multi_choice, valamint a beviteli tároló: .ginput_container_radio (egy lehetőség) vagy .ginput_container_checkbox (több lehetőség). A tároló elrendezését és belső margóját a beviteli tárolón állítsd:

.gform-theme--framework .gfield--type-multi_choice .ginput_container_radio {
  background-color: #f9f9f9;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
}

.gform-theme--framework .gfield--type-multi_choice .ginput_container_checkbox {
  background-color: #f9f9f9;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
}

/* csak a 1926-os űrlapon, mindkét módra */
.gform-theme--framework#gform_wrapper_1926 .gfield--type-multi_choice .ginput_container_radio,
.gform-theme--framework#gform_wrapper_1926 .gfield--type-multi_choice .ginput_container_checkbox {
  background-color: #f9f9f9;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
}

Elrendezés és feliratok

A lehetőségek közti távolságot és a feliratok megjelenését CSS-változók szabályozzák. Állítsd őket a .gfield--type-multi_choice elemen:

Változó	Mit szabályoz
--gf-field-choice-gap	a lehetőségek közti távolság
--gf-ctrl-label-color-secondary	a lehetőségek feliratának színe
--gf-ctrl-label-font-size-secondary	a lehetőségek feliratának betűmérete

.gform-theme--framework .gfield--type-multi_choice {
  --gf-field-choice-gap: 16px;
  --gf-ctrl-label-color-secondary: #1a365d;
  --gf-ctrl-label-font-size-secondary: 16px;
}

/* egy űrlapra */
.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
  --gf-field-choice-gap: 20px;
  --gf-ctrl-label-color-secondary: #112337;
  --gf-ctrl-label-font-size-secondary: 18px;
}

/* egy mezőre */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-field-choice-gap: 12px;
  --gf-ctrl-label-color-secondary: #0f172a;
}

Ha a rádiógomb és a jelölőnégyzet módnak eltérő értéket szeretnél, a .gfield_radio és a .gfield_checkbox elemre külön állítsd be:

.gform-theme--framework .gfield--type-multi_choice .gfield_radio {
  --gf-field-choice-gap: 20px;
}

.gform-theme--framework .gfield--type-multi_choice .gfield_checkbox {
  --gf-field-choice-gap: 12px;
}

Lehetőségek (.gchoice)

Minden lehetőség egy div.gchoice. Az egyes lehetőségek külön célzásához a gchoice_{űrlap-azonosító}{mező-azonosító}{lehetőség sorszáma} osztály is rajta van.

.gform-theme--framework .gfield--type-multi_choice .gchoice {
  padding: 4px 0;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice .gchoice {
  padding: 6px 0;
  margin-bottom: 4px;
}

Rádiógomb mód (egy lehetőség)

Változó	Mit szabályoz
--gf-ctrl-choice-size	a rádiógomb mérete
--gf-ctrl-radio-check-size	a belső jelölőpont mérete
--gf-ctrl-radio-check-radius	a jelölőpont lekerekítése

.gform-theme--framework .gfield--type-multi_choice {
  --gf-ctrl-choice-size: 20px;
  --gf-ctrl-radio-check-size: 7px;
  --gf-ctrl-radio-check-radius: 50%;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
  --gf-ctrl-choice-size: 22px;
  --gf-ctrl-radio-check-size: 8px;
}

Jelölőnégyzet mód (több lehetőség, pontos szám, tartomány)

.gform-theme--framework .gfield--type-multi_choice {
  --gf-ctrl-choice-size: 20px;
  --gf-ctrl-checkbox-check-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
  --gf-ctrl-choice-size: 18px;
  --gf-ctrl-checkbox-check-size: 12px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-choice-size: 20px;
  --gf-ctrl-checkbox-check-size: 16px;
}

Mezőcímke és leírás

A mező fő címkéje a .gform-field-label. A leírás színe és mérete külön változó:

.gform-theme--framework .gfield--type-multi_choice {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
  --gf-ctrl-label-color-primary: #112337;
  --gf-ctrl-label-font-size-primary: 18px;
}

Az összes kiválasztásának bekapcsolása (csak jelölőnégyzet módban)

Ha az Az összes kiválasztásának bekapcsolása be van kapcsolva, az „összes” lehetőség a .gchoice_select_all osztályt kapja:

.gform-theme--framework .gfield--type-multi_choice .gchoice_select_all {
  --gf-ctrl-label-color-secondary: #1a365d;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice .gchoice_select_all .gform-field-label {
  --gf-ctrl-label-font-size-secondary: 15px;
}

„Egyéb” lehetőség (csak rádiógomb módban)

Az „egyéb” lehetőség szövegmezőjének legnagyobb szélességét a --gf-field-choice-other-ctrl-max-width változó adja:

.gform-theme--framework .gfield--type-multi_choice .gchoice_other_control {
  --gf-field-choice-other-ctrl-max-width: 256px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice .gchoice_other_control {
  --gf-field-choice-other-ctrl-max-width: 200px;
}

A választási korlát üzenete

A számkorlát üzenete a .gfield_choice_limit_message elem. Ha a korlát sérül, az elem a .validation_message osztályt is megkapja:

.gform-theme--framework .gfield--type-multi_choice .gfield_choice_limit_message {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework .gfield--type-multi_choice .gfield_choice_limit_message.validation_message {
  --gf-ctrl-desc-color: #c02b0a;
}

Vízszintes elrendezés

Ha a mezőn a Lehetőségek elrendezése beállítás Vízszintes, a mező megkapja a .gfield--choice-align-horizontal osztályt. A sorok és az oszlopok közti távolság:

.gform-theme--framework .gfield--type-multi_choice.gfield--choice-align-horizontal .gfield_radio,
.gform-theme--framework .gfield--type-multi_choice.gfield--choice-align-horizontal .gfield_checkbox {
  --gf-field-choice-align-x-gap-y: 12px;
  --gf-field-choice-align-x-gap-x: 16px;
}

Használati példák

Nagyobb térköz a lehetőségek között:

.gform-theme--framework .gfield--type-multi_choice .gfield_radio,
.gform-theme--framework .gfield--type-multi_choice .gfield_checkbox {
  --gf-field-choice-gap: 24px;
}

Nagyobb rádiógombok:

.gform-theme--framework .gfield--type-multi_choice {
  --gf-ctrl-choice-size: 22px;
  --gf-ctrl-radio-check-size: 8px;
}

Nagyobb jelölőnégyzetek:

.gform-theme--framework .gfield--type-multi_choice {
  --gf-ctrl-choice-size: 24px;
  --gf-ctrl-checkbox-check-size: 16px;
}

Tömörebb elrendezés egy adott oldalon (a 571 az oldal azonosítója):

.page-id-571 .gform-theme--framework .gfield--type-multi_choice {
  --gf-ctrl-label-font-size-secondary: 14px;
  --gf-field-choice-gap: 8px;
}

Egyetlen mező célzása:

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-label-color-secondary: #334155;
  --gf-field-choice-gap: 12px;
}

Egyéni kiemelőszín:

.gform-theme--framework#gform_wrapper_112 .gfield--type-multi_choice {
  --gf-ctrl-accent-color: #204ce5;
  --gf-ctrl-choice-check-color: #204ce5;
}

Képkiválasztás mező

A Képkiválasztás mező képeket jelenít meg választható lehetőségként, egy- (rádiógomb) vagy többválasztós (jelölőnégyzet) elrendezésben. Az Orbital témában két megjelenési módja van, Kártya (ez az alapérték) és Kártya nélkül, valamint két alakja: Négyzet (alapérték) és Kör. Ezeket az űrlap Képkiválasztás stílusai beállításai szabályozzák.

A felépítés: a lista tárolója div.gfield_radio vagy div.gfield_checkbox, minden lehetőség egy div.gchoice, a képet és a tartalmat pedig egy span.gfield-image-choice-wrapper-outer fogja közre. A mögöttes rádiógomb és jelölőnégyzet böngészőelem, ezért a teljes testreszabás itt is korlátozott.

Tároló

A mező osztályai: .gfield, .gfield--type-image_choice, .ginput_container_image_choice, valamint .ginput_container_radio (egy lehetőség) vagy .ginput_container_checkbox (több lehetőség). A tároló elrendezéséhez a .ginput_container_image_choice elemet célozd:

.gform-theme--framework .gfield--type-image_choice .ginput_container_image_choice {
  background-color: #f9f9f9;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice .ginput_container_image_choice {
  background-color: #f9f9f9;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 12px;
}

Lista és térköz

A .gfield_radio vagy .gfield_checkbox a képek listatárolója. Az elemek közti távolságot a --gf-field-img-choice-gap állítja:

.gform-theme--framework .gfield--type-image_choice .gfield_radio,
.gform-theme--framework .gfield--type-image_choice .gfield_checkbox {
  --gf-field-img-choice-gap: 20px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice .gfield_radio,
.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice .gfield_checkbox {
  --gf-field-img-choice-gap: 24px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gfield_radio,
.gform-theme--framework#gform_wrapper_112 #field_112_4 .gfield_checkbox {
  --gf-field-img-choice-gap: 16px;
}

Elemek (lehetőségek) mérete

A lehetőségek mérete a --gf-field-img-choice-size változóval állítható. Három előre megadott méret is van: --gf-field-img-choice-size-sm, --gf-field-img-choice-size-md és --gf-field-img-choice-size-lg.

.gform-theme--framework .gfield--type-image_choice {
  --gf-field-img-choice-size: 50%;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice {
  --gf-field-img-choice-size: 250px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-field-img-choice-size: 50%;
}

Képkeret

A képet egy div.gfield-choice-image-wrapper fogja közre. A fontos változók:

Változó	Mit szabályoz
--gf-field-img-choice-aspect-ratio	a kép képaránya
--gf-field-img-choice-margin-y-end	a kép alatti térköz
--gf-field-img-choice-radius-square	a négyzet alakú kép lekerekítése
--gf-field-img-choice-radius-round	a kör alakú kép lekerekítése

.gform-theme--framework .gfield--type-image_choice {
  --gf-field-img-choice-aspect-ratio: 1/1;
  --gf-field-img-choice-margin-y-end: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-style-square {
  --gf-field-img-choice-radius-square: 8px;
}

Helyőrző, ha nincs kép

Ha egy lehetőséghez nincs kép, a helyén egy span.gfield-choice-image-no-image helyőrző jelenik meg. A színei megjelenési módonként külön változók:

Mód	Háttér	Szín
Kártya	--gf-field-img-choice-card-placeholder-bg-color	--gf-field-img-choice-card-placeholder-color
Kártya nélkül	--gf-field-img-choice-no-card-placeholder-bg-color	--gf-field-img-choice-no-card-placeholder-color

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
  --gf-field-img-choice-card-placeholder-bg-color: rgba(0, 0, 0, 0.03);
  --gf-field-img-choice-card-placeholder-color: rgba(0, 0, 0, 0.35);
  --gf-field-img-choice-placeholder-icon-font-size: 48px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-appearance-no-card {
  --gf-field-img-choice-no-card-placeholder-bg-color: #f5f5f5;
  --gf-field-img-choice-no-card-placeholder-color: #6b7280;
}

Kijelölésjelző

Ha egy lehetőség ki van választva, egy pipa ikon jelenik meg rajta. A változói:

• --gf-field-img-choice-check-ind-size: a jelző mérete,
• --gf-field-img-choice-check-ind-icon-size: az ikon mérete,
• --gf-field-img-choice-card-check-ind-bg-color és --gf-field-img-choice-card-check-ind-icon-color: a jelző háttere és az ikon színe Kártya módban,
• --gf-field-img-choice-no-card-check-ind-bg-color és --gf-field-img-choice-no-card-check-ind-icon-color: ugyanez Kártya nélküli módban.

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
  --gf-field-img-choice-card-check-ind-bg-color: #204ce5;
  --gf-field-img-choice-card-check-ind-icon-color: #ffffff;
  --gf-field-img-choice-check-ind-size: 32px;
  --gf-field-img-choice-check-ind-icon-size: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-appearance-no-card {
  --gf-field-img-choice-no-card-check-ind-bg-color: #1a365d;
  --gf-field-img-choice-no-card-check-ind-icon-color: #ffffff;
}

A lehetőségek feliratai

A feliratok a span.gfield-image-choice-wrapper-inner elemben vannak. A színüket a --gf-ctrl-color, a méretüket a --gf-ctrl-label-font-size-secondary változó adja:

.gform-theme--framework .gfield--type-image_choice {
  --gf-ctrl-color: #1a365d;
  --gf-ctrl-label-font-size-secondary: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice {
  --gf-ctrl-color: #112337;
  --gf-ctrl-label-font-size-secondary: 14px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-color: #0f172a;
}

Beviteli elemek

A mögöttes elemek input.gfield-choice-input, típusuk radio vagy checkbox. Ha a felirat látszik, ezek el is lehetnek rejtve.

.gform-theme--framework .gfield--type-image_choice {
  --gf-ctrl-choice-size: 20px;
  --gf-ctrl-checkbox-check-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice {
  --gf-ctrl-choice-size: 18px;
}

Kártya megjelenés

Kártya módban a mező a .gfield--image-choice-appearance-card osztályt viseli. Az árnyék, az árnyék rámutatáskor és a kártya belső távolsága, valamint a háttér változókkal állítható:

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
  --gf-field-img-choice-shadow: 0 2px 8px rgba(0,0,0,0.08);
  --gf-field-img-choice-shadow-hover: 0 4px 12px rgba(0,0,0,0.12);
  --gf-field-img-choice-card-space: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-appearance-card {
  --gf-ctrl-bg-color: #fafafa;
  --gf-ctrl-bg-color-hover: #f0f0f0;
}

Kártya nélküli megjelenés

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-no-card {
  --gf-field-img-choice-shadow: 0 1px 3px rgba(0,0,0,0.1);
  --gf-field-img-choice-shadow-hover: 0 2px 6px rgba(0,0,0,0.15);
}

Alakváltozatok

Négyzet:

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-style-square {
  --gf-field-img-choice-radius-square: 12px;
}

Kör:

.gform-theme--framework#gform_wrapper_112 .gfield--type-image_choice.gfield--image-choice-style-circle {
  --gf-field-img-choice-radius-round: 50%;
}

Mezőcímke, leírás, hibaállapot és korlátüzenet

.gform-theme--framework .gfield--type-image_choice {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* hibás mező szegélye */
.gform-theme--framework .gfield_error.gfield--type-image_choice {
  --gf-ctrl-border-color-error: #c02b0a;
}

/* a választási korlát üzenete */
.gform-theme--framework .gfield--type-image_choice .gfield_choice_limit_message {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
  margin-bottom: 8px;
}

Használati példák

Egyéni kártyastílus:

.gform-theme--framework .gfield--type-image_choice.gfield--image-choice-appearance-card {
  --gf-field-img-choice-shadow: 0 4px 12px rgba(0,0,0,0.1);
  --gf-field-img-choice-shadow-hover: 0 6px 20px rgba(0,0,0,0.15);
  --gf-field-img-choice-card-check-ind-bg-color: #059669;
}

Egyetlen mező célzása:

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-color: #334155;
  --gf-field-img-choice-size: 180px;
  --gf-field-img-choice-gap: 16px;
}

Hozzájárulás mező

A Hozzájárulás mező egyetlen jelölőnégyzetet, egy sorban lévő feliratot és egy elhagyható szöveges leírást (a megállapodás szövegét) jelenít meg. A jelölőnégyzet és a rádiógomb mezők jelölését használja.

Fontos osztályai: .gfield--type-consent, .gfield--type-choice és .ginput_container_consent. A jelölőnégyzet felirata a .gform-field-label.gform-field-label--type-inline.gfield_consent_label, a megállapodás szövege a .gfield_consent_description elemben van (azonosítója gfield_consent_description_{űrlap-azonosító}_{mező-azonosító}). A jelölőnégyzet a böngésző saját elemét használja, az Orbital --gf-ctrl-choice-size és --gf-ctrl-checkbox-check-size változóival.

A mező tárolója

/* minden Orbital űrlap */
.gform-theme--framework .gfield--type-consent {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-consent {
  --gf-ctrl-label-color-primary: #112337;
  --gf-ctrl-radius: 6px;
}

/* a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

A jelölőnégyzet felirata

.gform-theme--framework .gfield--type-consent .gfield_consent_label,
.gform-theme--framework .gfield--type-consent .gform-field-label--type-inline {
  --gf-ctrl-label-color-secondary: #1a365d;
  --gf-ctrl-label-font-size-secondary: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield_consent_label {
  --gf-ctrl-label-color-secondary: #112337;
  --gf-ctrl-label-font-size-secondary: 14px;
}

A jelölőnégyzet

A jelölőnégyzet az input[type="checkbox"] a .ginput_container_consent tárolóban:

.gform-theme--framework .gfield--type-consent {
  --gf-ctrl-choice-size: 24px;
  --gf-ctrl-checkbox-check-size: 14px;
  --gf-ctrl-choice-check-color: #4f46e5;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-consent {
  --gf-ctrl-choice-size: 18px;
  --gf-ctrl-checkbox-check-size: 12px;
}

A megállapodás szövege

A szöveg dobozának szegélyét és legnagyobb magasságát változók adják, a színét és a méretét közvetlen tulajdonságokkal állítsd:

Változó	Mit szabályoz
--gf-ctrl-desc-border-color-consent	a doboz szegélyének színe
--gf-ctrl-desc-border-width-consent	a szegély vastagsága
--gf-ctrl-desc-max-height-consent	a doboz legnagyobb magassága (e fölött görgethető)

.gform-theme--framework .gfield_consent_description {
  --gf-ctrl-desc-border-color-consent: #e5e7eb;
  --gf-ctrl-desc-border-width-consent: 1px;
  --gf-ctrl-desc-max-height-consent: 400px;
  color: #6b7280;
  font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield_consent_description {
  --gf-ctrl-desc-border-color-consent: #d2d5db;
  color: #4b5563;
  font-size: 13px;
}

Használati példák

Nagyobb jelölőnégyzet kiemelt felirattal:

.gform-theme--framework .gfield--type-consent {
  --gf-ctrl-choice-size: 24px;
  --gf-ctrl-checkbox-check-size: 16px;
  --gf-ctrl-label-color-secondary: #1e293b;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-consent {
  --gf-ctrl-choice-size: 20px;
}

A megállapodás dobozának formázása:

.gform-theme--framework .gfield_consent_description {
  --gf-ctrl-desc-border-color-consent: #cbd5e1;
  --gf-ctrl-desc-border-width-consent: 2px;
  --gf-ctrl-desc-max-height-consent: 300px;
  padding: 16px;
}

Egy adott hozzájárulás mező célzása azonosító alapján:

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-label-color-secondary: #0f172a;
  --gf-ctrl-choice-check-color: #6366f1;
}