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

> A Bekezdés (többsoros szöveg) és a Szakasz 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 **Bekezdés** és **Szakasz** mezőinek stílusozását írja le. A régebbi, 2.5-ös témájú űrlapokra nem érvényes. A hatókörök (minden űrlap, egy űrlap, egy mező) és az azonosítók jelölése ugyanaz, mint a [választós mezők fejezetében](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-orbital-valasztos-mezok/): a `112` az űrlap, a `4` a mező azonosítója a példákban.

## Bekezdés mező

A Bekezdés mező (belső néven `textarea`) többsoros szövegbeviteli mezőt jelenít meg hosszabb szövegekhez. Ha be van kapcsolva a **Formázott szöveges szerkesztő használata**, a sima szövegdoboz helyett a TinyMCE szerkesztő jelenhet meg, mindkettő megkapja a keretrendszer stílusát. Ha a mezőn meg van adva a **Maximális karakterszám**, a beviteli mező alatt karakterszámláló látszik. A mező mérete (kicsi, közepes, nagy) a szövegdoboz magasságát adja.

### Tároló

A mező osztályai: `.gfield` és `.gfield--type-textarea`, az azonosítója `field_{űrlap}_{mező}` alakú (például `field_5_3`).

```css
.gform-theme--framework .gfield--type-textarea {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-textarea-radius: 6px;
}
```

### A beviteli mező

A szövegdoboz a keretrendszer általános beviteli változóit örökli, ezeket a mező vagy az űrlap hatókörében állítsd. A kifejezetten a szövegdobozra vonatkozó változók:

| Változó | Mit szabályoz |
|---|---|
| `--gf-ctrl-textarea-height` | a szövegdoboz magassága |
| `--gf-ctrl-textarea-radius` | a sarkok lekerekítése |
| `--gf-ctrl-textarea-line-height` | a sormagasság |
| `--gf-ctrl-textarea-padding-y` | a függőleges belső távolság |
| `--gf-ctrl-textarea-resize` | átméretezhetőség (például `vertical`) |

A keretrendszer a magasságot a `block-size` tulajdonsággal és a `--gf-ctrl-textarea-height` változóval adja meg. Mivel a szövegdoboznak HTML `rows` attribútuma is van, egyes böngészők a sorokból számolt méretet részesítik előnyben a változóval szemben. Hogy a `--gf-ctrl-textarea-height` megbízhatóan érvényesüljön, adj a szövegdobozra kifejezett `min-block-size` értéket is: ez felülírja a sorokból számolt minimumot.

```css
.gform-theme--framework .gfield--type-textarea {
	--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-textarea-height: 150px;
	--gf-ctrl-textarea-radius: 6px;
	--gf-ctrl-font-size: 16px;
}

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

.gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
	min-block-size: 120px;
}
```

Ha a formázott szöveges szerkesztő be van kapcsolva, a látható szerkesztőfelület egy iframe-ben van. A szövegdobozra írt stílus csak akkor hat közvetlenül, ha a szerkesztő ki van kapcsolva, bekapcsolt szerkesztőnél a stílus többnyire a mögöttes, rejtett szövegdobozt vagy a TinyMCE tárolóját érinti.

### Karakterszámláló

Ha a **Maximális karakterszám** be van állítva, a szövegdoboz alatt számláló jelenik meg (például „0 of 500 max characters” jellegű szöveg). A számláló elemei: `.charleft`, `.ginput_counter` és `.gfield_description`. A határ közelében a `.warningTextareaInfo` osztályt is megkaphatja.

```css
.gform-theme--framework .gfield--type-textarea .charleft,
.gform-theme--framework .gfield--type-textarea .ginput_counter {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
	margin-top: 8px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-textarea .charleft {
	--gf-ctrl-desc-color: #4b5563;
	--gf-ctrl-desc-font-size: 13px;
}

.gform-theme--framework .gfield--type-textarea .charleft.warningTextareaInfo {
	--gf-ctrl-desc-color: #112337;
}
```

### Túllépett korlát (csak a formázott szerkesztőnél)

Ha a formázott szöveges szerkesztő be van kapcsolva, és a szöveg átlépi a maximális karakterszámot, a számláló megkapja a `.ginput_counter_error` osztályt. A sima szövegdobozos mezők ezt az osztályt nem használják.

```css
.gform-theme--framework .gfield--type-textarea .charleft.ginput_counter_error {
	--gf-ctrl-desc-color: #c02b0a;
}
```

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

A fő címke a szokásos `.gform-field-label`. A leírás a beállított elhelyezéstől függően a beviteli mező fölött vagy alatt jelenik meg; a színét és a méretét a `--gf-ctrl-desc-color` és a `--gf-ctrl-desc-font-size` változó adja.

```css
.gform-theme--framework .gfield--type-textarea {
	--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-textarea {
	--gf-ctrl-label-color-primary: #112337;
	--gf-ctrl-label-font-size-primary: 18px;
}
```

### Használati példák

Kiemelő színű keret:

```css
.gform-theme--framework .gfield--type-textarea {
	--gf-ctrl-border-color: #204ce5;
	--gf-ctrl-border-color-hover: #044ad3;
	--gf-ctrl-textarea-radius: 6px;
}
```

Tömör mezők egy adott oldalon (a `571` az oldal azonosítója):

```css
.page-id-571 .gform-theme--framework .gfield--type-textarea {
	--gf-ctrl-label-font-size-primary: 14px;
	--gf-ctrl-desc-font-size: 12px;
	--gf-ctrl-textarea-height: 100px;
}

.page-id-571 .gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
	min-block-size: 50px;
}
```

Egyetlen Bekezdés mező célzása:

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

Magasabb mező hosszú szövegekhez:

```css
.gform-theme--framework .gfield--type-textarea {
	--gf-ctrl-textarea-height: 250px;
	--gf-ctrl-textarea-resize: vertical;
}

.gform-theme--framework .gfield--type-textarea .ginput_container_textarea textarea {
	min-block-size: 120px;
}
```

## Szakasz mező

A Szakasz mező tartalmi elválasztót ad, amellyel a mezőcsoportokat rendezheted. Megjeleníti a címet (fejlécet) és az elhagyható leírást, adatot nem gyűjt. Az Orbital témában a cím `h3` elem, a régi jelölésben `h2`.

Az Orbital keretrendszer a `.gfield--type-section *` elemeket kiveszi a CSS-alaphelyzetbe állításból. Ezért a cím és a leírás a böngésző alapértelmezett vagy a saját stílusát viseli (hasonlóan a HTML mezőhöz). Emiatt a címet és a leírást közvetlen CSS-tulajdonságokkal stílusozd, nem változókkal.

### Tároló

A mező osztályai: `.gfield`, `.gfield--type-section` és `.gsection`, az azonosítója `field_{űrlap}_{mező}`. A keretrendszer alul szegélyt és belső távolságot ad, ezek változói:

| Változó | Mit szabályoz |
|---|---|
| `--gf-field-section-border-color` | a szegély színe |
| `--gf-field-section-border-style` | a szegély stílusa |
| `--gf-field-section-border-width` | a szegély vastagsága |
| `--gf-field-section-padding-y-end` | az alsó belső távolság |

```css
.gform-theme--framework .gfield--type-section {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-border-width: 2px;
	--gf-field-section-padding-y-end: 24px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section {
	--gf-field-section-border-color: #686e77;
	--gf-field-section-padding-y-end: 16px;
	margin-top: 24px;
	margin-bottom: 16px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-border-width: 2px;
	margin-top: 40px;
}
```

### Cím

A cím a `.gsection_title` osztályt viseli:

```css
.gform-theme--framework .gfield--type-section .gsection_title {
	color: #112337;
	font-size: 18px;
	font-weight: 600;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section .gsection_title {
	color: #1a365d;
	font-size: 20px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_title {
	color: #044ad3;
	font-size: 22px;
	font-weight: 600;
}
```

### Leírás

Ha van leírás, a cím alatt egy `.gsection_description` osztályú `div`-ben jelenik meg:

```css
.gform-theme--framework .gfield--type-section .gsection_description {
	color: #6b7280;
	font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section .gsection_description {
	color: #4b5563;
	font-size: 15px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_description {
	color: #64748b;
	font-size: 14px;
}
```

### Egy adott szakasz célzása

Ha egy szakaszt másképp szeretnél formázni, mint a többit, használd a mező azonosítóját:

```css
.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_title {
	color: #0f172a;
	font-size: 22px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 .gsection_description {
	color: #64748b;
	font-size: 15px;
}
```

### Használati példák

Szakasz kiemelő elválasztóvonallal:

```css
.gform-theme--framework .gfield--type-section {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-border-width: 2px;
	margin-top: 40px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section {
	--gf-field-section-border-color: #204ce5;
	--gf-field-section-padding-y-end: 20px;
}
```

Kiemelt doboz jellegű szakasz:

```css
.gform-theme--framework .gfield--type-section.gsection {
	background-color: #f8fafc;
	padding: 24px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
}

.gform-theme--framework .gfield--type-section .gsection_title {
	color: #112337;
	font-size: 18px;
}

.gform-theme--framework .gfield--type-section .gsection_description {
	color: #585e6a;
	font-size: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-section.gsection {
	background-color: #f1f5f9;
	padding: 20px;
	border-radius: 8px;
}
```