Az árazási mezők, a Bankkártya és a Bejegyzés képe mező CSS-e az Orbital témában

Ezek a választók csak az Orbital témájú űrlapokra érvényesek. A 2.5-ös témához a CSS-választók az árazási, bejegyzés- és captcha-mezőkhöz fejezet tartozik. A CSS API-változók áttekintése a CSS-útmutató fejezetben van.

A példákban a 112 az űrlap azonosítója, a 4 a mező azonosítója: ezeket cseréld a sajátodra. Minden mező azonosítója field_{űrlapazonosító}_{mezőazonosító} alakú, például field_5_3.

Közös minta: a mezőtípus osztályát (például .gfield--type-total) a .gform-theme--framework után írod; egy adott űrlapra a .gform-theme--framework#gform_wrapper_112 szűkít; egyetlen mezőre az #field_112_4.

Termék mező

A Termék mezők alaposztálya a .gfield--type-product. Egy konkrét terméktípushoz mindig kombináld a .gfield--input-type-* osztállyal is.

Terméktípus	Választó
Minden termékmező	.gfield--type-product
Egy termék (single product)	.gfield--type-product.gfield--input-type-singleproduct
Legördülő lista	.gfield--type-product.gfield--input-type-select
Választógombok	.gfield--type-product.gfield--input-type-radio
Számítás (calculation)	.gfield--type-product.gfield--input-type-calculation
Felhasználó által megadott ár	.gfield--type-price .ginput_container_product_price .ginput_amount

A kiemelés előtt jól jön egy szaggatott körvonal, amellyel ellenőrizheted, melyik elemet találtad el:

.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  outline: 1px dashed #94a3b8;
}

Egy termék: részletek

/* tároló */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  padding: 8px 0;
}

/* az ár címkéje */
.gform-theme--framework .gfield--type-product .ginput_product_price_label {
  --gf-local-color: #6b7280;
  --gf-local-font-size: 14px;
}

/* az ár */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  --gf-field-prod-price-color: #1a5f3a;
  --gf-ctrl-readonly-font-weight: 600;
}

/* a mennyiség beviteli mezőjének szélessége */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  --gf-field-prod-quant-width: 120px;
}

/* a mennyiség címkéje */
.gform-theme--framework .gfield--type-product .ginput_quantity_label {
  --gf-local-color: #6b7280;
  --gf-local-font-size: 14px;
}

/* a mező címkéje */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* a mező leírása */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

Példák

/* az ár kiemelve */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  --gf-field-prod-price-color: #2563eb;
  --gf-ctrl-readonly-color: #2563eb;
}

/* egyetlen termékmező: a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-field-prod-price-color: #059669;
}

/* a mennyiség mezője kiemelő kerettel */
.gform-theme--framework .gfield--type-product.gfield--input-type-singleproduct {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

Mennyiség mező

A Mennyiség mező egy Termék mezőhöz tartozik, és három megjelenési módja van: Szám (alapértelmezett), Legördülő lista és Rejtett. Itt a Szám változat szerepel: egy input[type="number"] elem a .ginput_container_number tárolóban.

Osztályai: .gfield--type-quantity, .gfield_price, .gfield_quantity és .gfield_quantity_{űrlapazonosító}_{termékmező-azonosító}.

/* tároló: minden Orbital űrlap */
.gform-theme--framework .gfield--type-quantity .ginput_container_number {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-quantity .ginput_container_number {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 .ginput_container_number {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

Beviteli elem

A beviteli elem natív számmező, a léptető gombok kinézete böngészőnként eltér, és korlátozottan módosítható. A léptetőgombokhoz ezek a változók használhatók: --gf-ctrl-number-spin-btn-opacity, --gf-ctrl-number-spin-btn-appearance, --gf-ctrl-number-spin-btn-bg-position, --gf-ctrl-number-spin-btn-bg-size és --gf-ctrl-number-spin-btn-width.

.gform-theme--framework .gfield--type-quantity {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-number-spin-btn-opacity: 1;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-quantity {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-radius: 6px;
}

/* a beviteli elem szélessége */
.gform-theme--framework .gfield--type-quantity input[type="number"] {
  max-width: 120px;
}

Tartományt jelző utasítás

Ha a mezőben van legkisebb és legnagyobb érték, a mező egy .instruction feliratot jelenít meg.

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

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-quantity .instruction {
  --gf-ctrl-desc-font-size: 13px;
}

Címke, leírás, legördülő változat, példák

/* címke */
.gform-theme--framework .gfield--type-quantity {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-quantity {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* ha a mező Legördülő lista: a tároló a .ginput_container_select */
.gform-theme--framework .gfield--type-quantity .ginput_container_select {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
}

.gform-theme--framework .gfield--type-quantity select {
  max-width: 150px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-quantity {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

/* a léptetőgombok elrejtése */
.gform-theme--framework .gfield--type-quantity {
  --gf-ctrl-number-spin-btn-opacity: 0;
}

Opció mező

Az Opció mezővel a kitöltők termékopciókat választhatnak. Háromféle lehet: Legördülő lista, Választógombok és Jelölőnégyzetek. Itt a legördülő változat szerepel: natív select elem a .ginput_container_select tárolóban, vagy a Chosen.js felület, ha a Bővített felhasználói felület be van kapcsolva.

Osztályai: .gfield--type-option, a legördülő változatnál .gfield--input-type-select és .ginput_container_select.

/* tároló: minden Orbital űrlap */
.gform-theme--framework .gfield--type-option {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

Legördülő lista

A natív select megjelenését a böngésző szabja meg, ezért korlátozottan módosítható. Az általános vezérlőváltozók mellett select-specifikusak is vannak.

.gform-theme--framework .gfield--type-option {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-select-icon-size: 12px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-option {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-select-padding-x: 12px 32px;
}

/* a lista szélessége */
.gform-theme--framework .gfield--type-option select {
  max-width: 300px;
}

Lista elemei

A lista elemei natív option elemek, formázásuk böngészőnként eltér és korlátozott.

.gform-theme--framework .gfield--type-option select option {
  color: #1a365d;
}

Címke és leírás

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

Bővített felhasználói felület (Chosen)

Ha a bővített felület be van kapcsolva, a legördülő lista a Chosen.js elemeit használja: a látható vezérlő a .chosen-container-single, a lenyíló panel a .chosen-drop, a lista elemei a .chosen-results li.

/* a vezérlő */
.gform-theme--framework .gfield--type-option {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-focus: #204ce5;
  --gf-ctrl-select-icon-size: 10px;
}

/* a lenyíló panel */
.gform-theme--framework .gfield--type-option {
  --gf-ctrl-select-dropdown-border-color: #e5e7eb;
  --gf-ctrl-select-dropdown-radius: 6px;
  --gf-ctrl-select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* egy elem fölé húzott egérmutató */
.gform-theme--framework .gfield--type-option {
  --gf-ctrl-select-dropdown-option-bg-color-hover: #eef2ff;
  --gf-ctrl-select-dropdown-option-shadow-hover: inset 3px 0 0 #204ce5;
}

Példák

/* kiemelő keret */
.gform-theme--framework .gfield--type-option {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

/* a bővített felület panelje egyedi árnyékkal */
.gform-theme--framework .gfield--type-option {
  --gf-ctrl-select-dropdown-shadow: 0 8px 24px rgba(18, 25, 97, 0.12);
  --gf-ctrl-select-dropdown-radius: 8px;
}

Szállítás mező

A Szállítás mező szállítási díjat ad az űrlap végösszegéhez. Egyetlen szállítási módnál csak olvasható szövegmezőként jelenik meg (.ginput_shipping_price, .gform-text-input-reset stílussal). Ha több szállítási mód van (legördülő lista vagy választógombok), más jelölés készül; ez a rész az egy módos változatot tárgyalja.

Osztályai: .gfield--type-shipping és .ginput_container_singleshipping.

A díj színét, méretét és vastagságát a --gf-ctrl-readonly-color, a --gf-ctrl-readonly-font-size és a --gf-ctrl-readonly-font-weight változó adja.

/* tároló */
.gform-theme--framework .gfield--type-shipping {
  padding: 8px 0;
}

/* címke */
.gform-theme--framework .gfield--type-shipping {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* a szállítási díj: minden Orbital űrlap */
.gform-theme--framework .gfield--type-shipping {
  --gf-ctrl-readonly-color: #1a5f3a;
  --gf-ctrl-readonly-font-size: 18px;
  --gf-ctrl-readonly-font-weight: 600;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-shipping {
  --gf-ctrl-readonly-color: #112337;
  --gf-ctrl-readonly-font-size: 20px;
  --gf-ctrl-readonly-font-weight: 600;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-readonly-color: #059669;
  --gf-ctrl-readonly-font-size: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-shipping {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

Összesen mező

Az Összesen mező a számított rendelési végösszeget mutatja. Az Orbital témában olvasható szövegmező (.ginput_total), régi jelölés (legacy markup) esetén span.ginput_total.

Osztályai: .gfield--type-total és .ginput_container_total. A végösszeg színét, méretét és vastagságát ugyanazok a --gf-ctrl-readonly-* változók adják, mint a Szállítás mezőnél.

/* tároló */
.gform-theme--framework .gfield--type-total {
  padding: 8px 0;
}

/* a végösszeg: minden Orbital űrlap */
.gform-theme--framework .gfield--type-total {
  --gf-ctrl-readonly-color: #1a5f3a;
  --gf-ctrl-readonly-font-size: 18px;
  --gf-ctrl-readonly-font-weight: 600;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-total {
  --gf-ctrl-readonly-color: #112337;
  --gf-ctrl-readonly-font-size: 20px;
  --gf-ctrl-readonly-font-weight: 600;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-readonly-color: #059669;
  --gf-ctrl-readonly-font-size: 20px;
  --gf-ctrl-label-color-primary: #0f172a;
}

/* címke és leírás */
.gform-theme--framework .gfield--type-total {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

Bankkártya mező

A Bankkártya mező a kártyaszámot, a lejárati dátumot, a biztonsági kódot és a kártyabirtokos nevét kéri. Összetett, rácsos elrendezésű mező. Az alcímkék (Kártyaszám, Lejárati dátum, Biztonsági kód, Kártyabirtokos neve) a .gform-field-label--type-sub osztályt használják. A lejárati hónap és év natív select. Ha az oldal nem SSL-en fut, a mező fölött figyelmeztetés (.gfield_creditcard_warning) jelenik meg.

Osztályai: .gfield--type-creditcard, .gfield--input-type-creditcard és .ginput_container_creditcard. A tároló minden beviteli elemet egy .gform-grid-row sorba fog; az elrendezést és a térközöket a .ginput_container_creditcard elemen állítsd.

/* tároló: minden Orbital űrlap */
.gform-theme--framework .gfield--type-creditcard .ginput_container_creditcard {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
  padding: 12px 0;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_container_creditcard {
  --gf-ctrl-bg-color: #f9f9f9;
  padding: 16px 0;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 .ginput_container_creditcard {
  padding: 8px 12px;
}

Kártyaikonok

A támogatott kártyatípusok ikonjai (Visa, Mastercard, American Express, Discover és mások) a kártyaszám fölött, a .gform_card_icon_container tárolóban vannak. Az egyes ikonok SVG háttérképek, ezért a méretüket és elhelyezésüket a tárolón vagy közvetlen tulajdonságokkal módosítsd; a megjelenésüket CSS API-változók nem vezérlik.

.gform-theme--framework .gfield--type-creditcard .gform_card_icon_container {
  margin-block-end: 16px;
}

/* az egyes ikonok osztályai: gform_card_icon_amex, gform_card_icon_discover,
   gform_card_icon_mastercard, gform_card_icon_visa */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon_visa {
  opacity: 0.9;
}

/* az ikonok közti távolság */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon {
  margin-inline-end: 0.5rem;
}

Kártyaszám

A kártyaszám beviteli eleme a .ginput_full (a szerkesztőben .ginput_full_admin) elemben van. A vezérlőváltozókat a .gfield--type-creditcard elemen állítsd.

.gform-theme--framework .gfield--type-creditcard {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-border-color-focus: #204ce5;
  --gf-ctrl-font-size: 16px;
}

/* a szélességre nincs változó, közvetlen tulajdonság kell */
.gform-theme--framework .gfield--type-creditcard .ginput_full input {
  max-width: 100%;
}

Lejárat

A lejárati rész egy mezőcsoport (fieldset) .ginput_cardinfo_left osztállyal, a hónap és az év választói a .ginput_card_expiration_container tárolóban vannak. A hónap listája a .ginput_card_expiration_month, az évé a .ginput_card_expiration_year. Mindkettő natív select, ezért böngészőnként és operációs rendszerenként másképp néz ki, és teljesen nem szabható testre.

/* a lejárati rész alcímkéje */
.gform-theme--framework .gfield--type-creditcard .ginput_cardinfo_left {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
}

/* a hónap és az év listája */
.gform-theme--framework .gfield--type-creditcard {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-select-icon-size: 10px;
}

/* csak a hónap, csak a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_card_expiration_month {
  --gf-ctrl-bg-color: #ffffff;
}

/* csak az év, csak a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_card_expiration_year {
  --gf-ctrl-border-color: #d2d5db;
}

Biztonsági kód

A biztonsági kód tárolója a .ginput_cardinfo_right, ebben van a beviteli elem (.ginput_card_security_code) és a CVC-súgóikon (.ginput_card_security_code_icon). Az ikon SVG háttérkép, CSS API-változó nincs hozzá.

/* alcímke */
.gform-theme--framework .gfield--type-creditcard .ginput_cardinfo_right {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
}

/* a beviteli elem szélessége */
.gform-theme--framework .gfield--type-creditcard .ginput_cardinfo_right .ginput_card_security_code {
  max-width: 7rem;
}

/* az ikon */
.gform-theme--framework .gfield--type-creditcard .ginput_card_security_code_icon {
  margin-inline-start: 0.5em;
}

Kártyabirtokos neve

A név beviteli eleme az utolsó .ginput_full elemben van, és ugyanazokat a vezérlőváltozókat használja, mint a többi szövegmező.

.gform-theme--framework .gfield--type-creditcard {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
}

Alcímkék, címke, leírás

/* alcímkék */
.gform-theme--framework .gfield--type-creditcard {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
  --gf-ctrl-label-font-weight-tertiary: 500;
}

/* a mező címkéje */
.gform-theme--framework .gfield--type-creditcard {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás (a beállított leírás-elhelyezéstől függően a mező alatt vagy fölött) */
.gform-theme--framework .gfield--type-creditcard {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

SSL-figyelmeztetés

Ha az űrlap nem SSL-en fut, a mező megkapja a .gfield_creditcard_warning osztályt, a figyelmeztető szöveg osztálya .gfield_creditcard_warning_message. A szöveghez a leíráshoz hasonló változók használhatók.

.gform-theme--framework .gfield_creditcard_warning .gfield_creditcard_warning_message {
  --gf-ctrl-desc-color: #c02b0a;
  --gf-ctrl-desc-font-size: 14px;
}

.gform-theme--framework .gfield_creditcard_warning {
  background-color: rgba(192, 43, 10, 0.08);
  border: 2px solid #c02b0a;
  padding: 12px;
}

Példák

/* kiemelő keret */
.gform-theme--framework .gfield--type-creditcard {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-border-color-focus: #204ce5;
  --gf-ctrl-radius: 6px;
}

/* egyetlen Bankkártya mező: a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-label-color-tertiary: #334155;
  --gf-ctrl-desc-color: #64748b;
}

Bejegyzés képe mező

A Bejegyzés képe mezőben a kitöltő képet tölt fel, és opcionálisan megadhatja a kép Alternatív szövegét, Címét, Képaláírását és Leírását. Egy fájlmezőt (input[type="file"]) és szöveges mezőket (input[type="text"]) jelenít meg a .ginput_container_post_image tárolóban.

• Az almezők tárolói: .ginput_post_image_alt, .ginput_post_image_title, .ginput_post_image_caption és .ginput_post_image_description.
• Az elfogadott fájlkiterjesztéseket a .gform_fileupload_rules mutatja.
• A mező osztályai: .gfield és .gfield--type-post_image.

Fájlmező

A natív fájlmező kevéssé formázható.

.gform-theme--framework .gfield--type-post_image {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_image {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 14px;
}

.gform-theme--framework .gfield--type-post_image input[type="file"] {
  max-width: 100%;
}

Szöveges metaadatmezők

.gform-theme--framework .gfield--type-post_image input[type="text"] {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-post_image input[type="text"] {
  --gf-ctrl-font-size: 14px;
  --gf-ctrl-radius: 6px;
}

Alcímkék, elfogadott kiterjesztések, címke, leírás

/* alcímkék */
.gform-theme--framework .gform-field-label--type-sub {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
}

/* az elfogadott kiterjesztések szövege */
.gform-theme--framework .gform_fileupload_rules {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 13px;
}

/* a mező címkéje */
.gform-theme--framework .gfield--type-post_image {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* a mező leírása */
.gform-theme--framework .gfield--type-post_image {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

Példák

/* kiemelő keret */
.gform-theme--framework .gfield--type-post_image {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-radius: 6px;
}

/* a metaadatmezők egyedi formázása */
.gform-theme--framework .ginput_post_image_alt input,
.gform-theme--framework .ginput_post_image_title input,
.gform-theme--framework .ginput_post_image_caption input,
.gform-theme--framework .ginput_post_image_description input {
  --gf-ctrl-border-color: #f9f9f9;
  --gf-ctrl-border-color-focus: #204ce5;
  --gf-ctrl-radius: 6px;
}

/* egyetlen Bejegyzés képe mező: a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .ginput_container_post_image {
  --gf-ctrl-border-color: #e2e8f0;
  padding: 16px;
}