# CSS-választók az Orbital téma Dátum, Idő, Lista és CAPTCHA mezőihez

> A Dátum, az Idő, a Lista és a CAPTCHA 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 **Dátum**, **Idő**, **Lista** és **CAPTCHA** 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`).

## Dátum mező

A Dátum mezőnek három beviteli típusa van:

| Típus | Mit jelenít meg | A mező osztálya |
|---|---|---|
| Dátumválasztó | egyetlen szövegmező, kívánság szerint naptárikonnal | `.gfield--input-type-datepicker` (a tárolója `.ginput_container_date`) |
| Dátum mező | külön hónap, nap és év mező | `.gfield--input-type-datefield` |
| Dátum legördülő | hónap, nap és év legördülő listája | `.gfield--input-type-datedropdown` |

A mező burkolója mindig megkapja a `.gfield--type-date` osztályt is. A „Dátum mező” és a „Dátum legördülő” részei a `.gfield_date_month`, `.gfield_date_day`, `.gfield_date_year`, illetve a `.gfield_date_dropdown_month`, `.gfield_date_dropdown_day`, `.gfield_date_dropdown_year`; mind a `.ginput_container.ginput_complex.gform-grid-row` elemben vannak. Az alcímkék osztálya `.gform-field-label.gform-field-label--type-sub`.

### A mező burkolója

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

.gform-theme--framework#gform_wrapper_112 .gfield--type-date {
	--gf-ctrl-label-color-primary: #112337;
	--gf-field-date-width: 140px;
}

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

### Dátumválasztó

A beviteli mező a `.ginput_container_date` elemben lévő szövegmező.

```css
.gform-theme--framework .gfield--input-type-datepicker {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-border-color-hover: #9ca3af;
	--gf-ctrl-font-size: 16px;
}
```

**Alapértelmezett naptárikon.** Az ikont egy `::after` pszeudoelem rajzolja, a mező ilyenkor a `.gfield--datepicker-default-icon` osztályt kapja.

```css
.gform-theme--framework .gfield--datepicker-default-icon {
	--gf-field-date-icon-color: #4b5563;
	--gf-field-date-icon-color-hover: #1f2937;
}
```

**Saját ikonkép.** Saját képnél egy `img` elem jelenik meg, a mező a `.gfield--datepicker-custom-icon` osztályt kapja.

```css
.gform-theme--framework .gfield--datepicker-custom-icon {
	--gf-field-date-custom-icon-max-height: 20px;
	--gf-field-date-custom-icon-max-width: 20px;
	--gf-field-date-custom-icon-opacity: 0.8;
	--gf-field-date-custom-icon-opacity-hover: 1;
}
```

**Ikon nélkül.** Ha nincs ikon kiválasztva, a mező a `.gfield--datepicker-no-icon` osztályt kapja:

```css
.gform-theme--framework#gform_wrapper_112 .gfield--datepicker-no-icon {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-border-color: #e5e7eb;
}
```

### Dátum mező (hónap, nap, év)

A hónap, a nap és az év mezőt külön-külön, ugyanazokkal a változókkal stílusozhatod; az alcímke színét és méretét a harmadlagos címkeváltozók adják.

```css
/* hónap */
.gform-theme--framework .gfield_date_month {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-radius: 6px;
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 14px;
}

/* nap */
.gform-theme--framework .gfield_date_day {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-label-color-tertiary: #1a365d;
}

/* év */
.gform-theme--framework .gfield_date_year {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-label-color-tertiary: #1a365d;
}
```

Egységes megjelenés mindhárom mezőre:

```css
.gform-theme--framework .gfield_date_month,
.gform-theme--framework .gfield_date_day,
.gform-theme--framework .gfield_date_year {
	--gf-ctrl-bg-color: #f9fafb;
	--gf-ctrl-border-color: #e5e7eb;
	--gf-ctrl-radius: 6px;
}
```

### Dátum legördülő

A legördülő változatban `select` elemek vannak a `.gfield_date_dropdown_month`, `.gfield_date_dropdown_day` és `.gfield_date_dropdown_year` elemekben.

```css
.gform-theme--framework .gfield_date_dropdown_month,
.gform-theme--framework .gfield_date_dropdown_day,
.gform-theme--framework .gfield_date_dropdown_year {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-border-color: #e5e7eb;
	--gf-field-date-width: 168px;
}
```

### Szélesség és adott mező

A `--gf-field-date-width` változóval szélesítheted a dátummezőket (például `200px`). Egy adott dátummezőt az azonosítójával célozhatsz:

```css
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-field-date-width: 160px;
}
```

## Idő mező

Az Idő mező órát és percet kér be. Az almezők a `.ginput_container.ginput_complex.gform-grid-row` elemben vannak:

- `.gfield_time_hour`: az óra beviteli mezője (számmező);
- `.gfield_time_minute`: a perc beviteli mezője;
- `.gfield_time_ampm`: a de./du. (AM/PM) választó, csak 12 órás formátumnál.

Az alcímkék osztálya `.gform-field-label--type-sub`, az óráé `.hour_label`, a percé `.minute_label`. 24 órás formátumnál a de./du. választó a `.gf_hide_ampm` osztállyal rejtett. A mező burkolója `.gfield--type-time`.

### A mező burkolója

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

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

### Óra és perc

```css
/* óra */
.gform-theme--framework .gfield--type-time .gfield_time_hour {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-time .gfield_time_hour .hour_label {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 14px;
}

/* perc */
.gform-theme--framework .gfield--type-time .gfield_time_minute {
	--gf-ctrl-bg-color: #ffffff;
	--gf-ctrl-border-color: #d2d5db;
	--gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-time .gfield_time_minute .minute_label {
	--gf-ctrl-label-color-tertiary: #1a365d;
	--gf-ctrl-label-font-size-tertiary: 14px;
}
```

### De./du. választó

A tároló osztályai `.gfield_time_ampm.ginput_container.ginput_container_time.gform-grid-col`; a benne lévő natív `select` stílusa:

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

### Használati példák

Szélesebb mezők, egységes óra és perc, a de./du. választó elrejtése:

```css
.gform-theme--framework .gfield--type-time {
	--gf-field-time-width: 160px;
}

.gform-theme--framework .gfield--type-time .gfield_time_hour,
.gform-theme--framework .gfield--type-time .gfield_time_minute {
	--gf-ctrl-bg-color: #f9fafb;
	--gf-ctrl-border-color: #e5e7eb;
	--gf-ctrl-radius: 6px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_ampm {
	display: none;
}
```

## Lista mező

A Lista mezőben a látogató sorokat vehet fel és törölhet. Két üzemmódja van: **egy oszlop** (soronként egy beviteli mező) és **több oszlop** (soronként több, címkézett oszlop). Az Orbital témában a Lista táblázat helyett `div`-alapú rácsot használ: `.gform-grid-row` és `.gform-grid-col`.

A szerkezet:

- a mező burkolója egy `fieldset`, `.gfield--type-list` (vagy `.gfield--input-type-list`) osztállyal;
- a tároló `.ginput_container_list`, több oszlopos módban `.ginput_container_list--columns` is;
- az oszlopfejléc `.gfield_list_header` (a `.gform-grid-row` is rajta van), az egyes oszlopcímkék `.gform-field-label.gfield_header_item.gform-grid-col`, az ikonoszlopé `.gfield_header_item--icons`;
- minden sor `.gfield_list_group` (`.gform-grid-row`), és páratlan/páros sor szerint `.gfield_list_row_odd` vagy `.gfield_list_row_even`;
- a cellák `.gfield_list_group_item.gfield_list_cell`, és egy oszlopazonosító osztályt is kapnak: `.gfield_list_{mező}_cell{oszlop}` (például `.gfield_list_3_cell1`);
- a hozzáadás és törlés vezérlői `.add_list_item` és `.delete_list_item`, ezek a mező beállításaitól függően gombként vagy ikonos hivatkozásként jelennek meg.

A cellák `input`, `select` vagy `textarea` elemet tartalmazhatnak a `gform_column_input` szűrő szerint.

### A mező burkolója és a tároló

```css
.gform-theme--framework .gfield--type-list {
	--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 .gfield--type-list .ginput_container_list {
	--gf-ctrl-border-color: #e5e7eb;
}

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

### Fejléc és oszlopok

```css
/* oszlopcímkék */
.gform-theme--framework .gfield--type-list .gfield_list_header .gfield_header_item {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* a 3-as Lista mező 1. oszlopa */
.gform-theme--framework .gfield--type-list .gfield_list_3_cell1 {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
}

/* csak az első oszlop, mezőazonosító nélkül */
.gform-theme--framework .gfield--type-list .gfield_list_group_item.gfield_list_cell:first-child {
	--gf-ctrl-bg-color: #f8fafc;
	--gf-ctrl-border-color: #cbd5e1;
}
```

### Sorok

A sorok közti függőleges távolságot a `--gf-field-gap-y` változó adja.

```css
/* váltakozó sorszínek */
.gform-theme--framework .gfield--type-list .gfield_list_row_odd {
	background-color: #f9fafb;
}

.gform-theme--framework .gfield--type-list .gfield_list_row_even {
	background-color: #ffffff;
}

/* minden sor */
.gform-theme--framework .gfield--type-list .gfield_list_group {
	border-bottom: 1px solid #e5e7eb;
}

.gform-theme--framework .gfield--type-list .ginput_container_list {
	--gf-field-gap-y: 16px;
}
```

### Cellák

A cellák beviteli elemeit a cella hatókörében állított vezérlőváltozókkal stílusozhatod:

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

Ha az elrendezés egymás alá tördelődik (például kisebb kijelzőn), minden cella a saját oszlopcímkéjét egy `::before` pszeudoelemben jeleníti meg, a szöveg a `content: attr(data-label)` szabállyal jön létre:

```css
.gform-theme--framework .gfield--type-list .gfield_list_group_item::before {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 14px;
}
```

### Ikonok

A hozzáadás és törlés ikonjai a `.gfield_list_icons.gform-grid-col` elemben vannak. A köztük lévő távolságot és a szélességet a `--gf-field-list-btns-gap` és a `--gf-field-list-btns-width` állítja. Az ikonok mérete és formája változókkal módosítható:

```css
.gform-theme--framework .gfield--type-list .gfield_list_icons {
	--gf-field-list-btns-gap: 12px;
}

.gform-theme--framework .gfield--type-list {
	--gf-field-list-btn-size: 20px;
	--gf-field-list-btn-radius: 6px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-list {
	--gf-field-list-btn-size: 18px;
	--gf-field-list-btn-padding-y: 2px;
	--gf-field-list-btn-padding-x: 2px;
}
```

A láthatóságra nincs változó, ezért egy ikon elrejtéséhez közvetlen tulajdonság kell:

```css
/* sor hozzáadása ikon elrejtése a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .add_list_item {
	display: none;
}

/* sor törlése ikon elrejtése a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .delete_list_item {
	display: none;
}
```

## CAPTCHA mező

A CAPTCHA mező a reCAPTCHA-t (Google v2) támogatja. A reCAPTCHA saját, harmadik féltől származó jelölést (iframe-et) illeszt a `.ginput_recaptcha` elembe, ezért a belső megjelenését nem a témaváltozók adják. A mező burkolója a `.gfield` és a `.gfield--type-captcha` osztályt kapja.

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

/* tároló belső térköze és kerete */
.gform-theme--framework .gfield--type-captcha {
	padding: 8px 0;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}

/* a reCAPTCHA iframe mérete */
.gform-theme--framework .gfield--type-captcha iframe {
	block-size: 90px;
	min-inline-size: 304px;
}
```

A **láthatatlan reCAPTCHA** nem jelenít meg látható mezőt, a jelvény máshol jelenik meg, a mező beállításai szerint. Rá csak a címke- és leíráspecifikus stílus vonatkozik.

## Egy űrlap, egy mező

Minden fenti mezőtípust egy adott űrlapra vagy mezőre szűkíthetsz, ha a `.gform-theme--framework#gform_wrapper_112` választót (egy űrlap) vagy a `#field_112_4` azonosítót (egy mező) használod, ahogy az egyes szakaszok mintái mutatják.