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

> A Termék, Mennyiség, Opció, Szállítás, Összesen, Bankkártya és Bejegyzés képe mező elemeinek CSS-választói és változói 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](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-ar-es-bejegyzes-mezok/) fejezet tartozik. A CSS API-változók áttekintése a [CSS-útmutató](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-attekintes/) 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:

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

### Egy termék: részletek

```css
/* 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

```css
/* 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ó}`.

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

```css
.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.

```css
.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

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

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

```css
.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.

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

### Címke és leírás

```css
.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`.

```css
/* 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

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

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

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

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

```css
.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.

```css
.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.

```css
/* 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á.

```css
/* 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ő.

```css
.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

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

```css
.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

```css
/* 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ó.

```css
.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

```css
.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

```css
/* 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

```css
/* 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;
}
```