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

> A Többválasztós, a Képkiválasztás és a Hozzájárulás mező elemei, CSS-változói és stílusmintái az Orbital témájú űrlapokon.

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](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-mezok-regi-tema/) 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](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-attekintes/) 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:

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

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

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

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

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

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

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

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

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

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

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

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

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

Nagyobb jelölőnégyzetek:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Kör:

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

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

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

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

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

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

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

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

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

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

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