# CSS-választók az Orbital téma Egysoros szöveg és Legördülő lista mezőihez

> Az Egysoros szöveg és a Legördülő lista 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 **Egysoros szöveg** és **Legördülő lista** 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 é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. A mező azonosítója `field_{űrlap}_{mező}` alakú (például `field_5_3`).

## Egysoros szöveg mező

Az Egysoros szöveg mező egyetlen beviteli elemet jelenít meg rövid szöveghez. A mező burkolója a `.gfield--type-text` és a `.gfield--input-type-text` osztályt kapja. Ha a **Jelszóbevitel bekapcsolása** be van kapcsolva, a burkoló osztálya nem változik, csak a beviteli elem `type` attribútuma lesz `password`. Ha meg van adva a **Maximális karakterszám**, a beviteli elem alatt karakterszámláló jelenik meg.

A mező mérete (kicsi, közepes, nagy) egy `small`, `medium` vagy `large` osztályt ad a beviteli elemre, ami a magasságát szabja meg:

| Méret | Változó | Érték |
|---|---|---|
| kicsi | `--gf-ctrl-size-sm` | 35 px |
| közepes | `--gf-ctrl-size-md` | 38 px |
| nagy | `--gf-ctrl-size-lg` | 47 px |

### Tároló

```css
/* minden Orbital űrlap */
.gform-theme--framework .gfield--type-text {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

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

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

### A beviteli elem

A beviteli elem a keretrendszer általános vezérlőváltozóit örökli, ezeket a mező vagy az űrlap hatókörében állítsd. Jelszó módban is ugyanaz a stílus érvényes. Ha csak a jelszómezőket akarod megcélozni, használd az `input[type="password"]` választót: a burkoló osztálya mindkét módban `.gfield--input-type-text`, külön `.gfield--input-type-password` osztály nincs.

```css
.gform-theme--framework .gfield--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;
}

/* nagy méretű mezők magasabbra */
.gform-theme--framework .gfield--type-text input.large {
	--gf-ctrl-size: 50px;
}

/* helyőrző: ha a változó nem hat, közvetlenül a ::placeholder elemet állítsd */
.gform-theme--framework .gfield--type-text input::placeholder {
	color: rgba(17, 35, 55, 0.5);
	font-size: 16px;
}

/* szélesség: nincs rá változó, közvetlen tulajdonság kell */
.gform-theme--framework .gfield--type-text input {
	max-width: 300px;
}
```

### Karakterszámláló

Ha be van állítva a **Maximális karakterszám**, a beviteli elem alatt megjelenik például a „0 / 500 karakter” jellegű számláló. Az osztályai: `.charleft` és `.ginput_counter`, és örökli a `.gfield_description` osztályt is. A korlát közelében megkapja a `.warningTextareaInfo`, a túllépésnél az `.errorTextareaInfo` osztályt.

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

/* a korlát közelében */
.gform-theme--framework .gfield--type-text .charleft.warningTextareaInfo {
	--gf-ctrl-desc-color: #112337;
}
```

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

A címke osztályai: `gfield_label` és `gform-field-label`. Kötelező mezőnél beágyazott `gfield_required` és `gfield_required_text` elem jelzi a „(Kötelező)” szöveget. A leírás a leírás helyének beállításától függően a beviteli elem fölött vagy alatt jelenik meg.

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

/* a kötelező jelölés */
.gform-theme--framework .gfield--type-text.gfield_contains_required {
	--gf-ctrl-label-color-req: #c02b0a;
	--gf-ctrl-label-font-size-req: 12px;
}
```

### Használati példák

Kiemelt keret:

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

Egy adott mező (a 112-es űrlap 4-es mezője):

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

Csak a jelszómezők:

```css
.gform-theme--framework .gfield--type-text input[type="password"] {
	--gf-ctrl-bg-color: #f8f9fa;
	--gf-ctrl-placeholder-color: rgba(17, 35, 55, 0.45);
}

.gform-theme--framework .gfield--type-text input[type="password"]::placeholder {
	color: rgba(17, 35, 55, 0.45);
}
```

## Legördülő lista mező

A Legördülő lista natív HTML `select` elemet jelenít meg. Ha be van kapcsolva a **Továbbfejlesztett felhasználói felület bekapcsolása**, a mező a Chosen.js-t használja, és a natív elem helyett egy `.chosen-container-single` elem látszik. A natív `select` és az `option` elemeket a böngésző rajzolja, ezért a megjelenésük böngészőtől, eszköztől és operációs rendszertől függ, és CSS-sel nem szabhatók át teljesen.

### Tároló

A mező burkolója a `.gfield` és a `.gfield--type-select` (a `select` bemenetet használó mezőknél a `.gfield--input-type-select`) osztályt kapja. Továbbfejlesztett felületnél a látható vezérlő a `.chosen-container-single`; a natív `select` ilyenkor is a dokumentumban marad a beküldéshez, de nem látszik.

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

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

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

### A natív lista

A natív `select` megkapja a keretrendszer vezérlőstílusát (háttér, keret, lekerekítés, betű), és a legördülő nyíl saját változóit.

```css
.gform-theme--framework .gfield--type-select {
	--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;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
	--gf-ctrl-select-padding-x: 12px 32px;
}

/* szélesség: közvetlen tulajdonság */
.gform-theme--framework .gfield--type-select select {
	max-width: 300px;
}
```

### A lehetőségek

A kiválasztott érték színét (a zárt listában látszó szöveget) a `select` elemen állíthatod. A nyitott lista `option` elemein a `color` és a betűtulajdonságok csak egyes böngészőkben hatnak, ezért ez megbízhatatlan.

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

### Továbbfejlesztett felület (Chosen)

Bekapcsolt továbbfejlesztett felületnél a látható vezérlő a `.chosen-container-single` (benne a kattintható `.chosen-single`), a nyitott lista a `.chosen-drop`, a lehetőségek a `.chosen-results` alatti `li` elemek. Erre a felületre ezeket a választókat használd, a natív `select` és a `.ginput_container_select` nem a látható elem.

**A vezérlő:**

```css
.gform-theme--framework .gfield--type-select {
	--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;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
	--gf-ctrl-radius: 6px;
	--gf-ctrl-select-search-icon-size: 16px;
}
```

**A nyitott lista** a `--gf-ctrl-select-dropdown-*` változókkal szabható:

```css
.gform-theme--framework .gfield--type-select {
	--gf-ctrl-select-dropdown-radius: 6px;
	--gf-ctrl-select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
```

**A lehetőségek** egérrel való érintésekor és a kijelölt állapotban a `--gf-ctrl-select-dropdown-option-bg-color-hover` és a `--gf-ctrl-select-dropdown-option-shadow-hover` változó hat:

```css
.gform-theme--framework .gfield--type-select {
	--gf-ctrl-select-dropdown-option-bg-color-hover: #eef2ff;
	--gf-ctrl-select-dropdown-option-shadow-hover: inset 3px 0 0 #204ce5;
}
```

**A keresőmező**, ha sok lehetőség miatt megjelenik, a `--gf-ctrl-select-search-*` változókkal állítható a mező hatókörében:

```css
.gform-theme--framework .gfield--type-select {
	--gf-ctrl-select-search-icon-size: 16px;
	--gf-ctrl-select-search-padding-x: 12px 16px;
}
```

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

A fő címkét a `.gform-field-label` adja; a színét és méretét a `--gf-ctrl-label-color-primary` és a `--gf-ctrl-label-font-size-primary` változó a `.gfield--type-select` hatókörben. A leírás a leírás helyétől függően a lista fölött vagy alatt látszik (`--gf-ctrl-desc-color`, `--gf-ctrl-desc-font-size`).

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

### Használati példák

Kiemelt keret:

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

Egy adott mező:

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

Továbbfejlesztett lista saját árnyékkal:

```css
.gform-theme--framework .gfield--type-select {
	--gf-ctrl-select-dropdown-shadow: 0 8px 24px rgba(18, 25, 97, 0.12);
	--gf-ctrl-select-dropdown-radius: 8px;
}
```