# A 2.5-ös téma CSS-választói

> A régebbi, 2.5-ös témájú űrlapok elemeinek CSS-választói: burkoló, fejléc, törzs, élőláb, megerősítés, hibák, többoldalas űrlap, termék és bankkártya mező.

Ez a fejezet a régebbi, 2.5-ös témájú (és a régi jelölést használó) űrlapok elemeit sorolja fel, mindegyikhez két választóval: az egyik minden űrlapra, a másik csak egy adott űrlapra hat. Az utóbbiban az `1` helyére a saját űrlapod azonosítóját írd. A példák szándékosan feltűnő (piros) szabályt használnak, hogy könnyen lásd, melyik elemet találtad el.

A mezőlista ezekben az űrlapokban `ul`, a mezők `li` elemek. Az újabb, Orbital témájú űrlapok választóit a [CSS-útmutató](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-attekintes/) fejezet tartalmazza.

## Űrlap burkolója

Az egész űrlapot körülvevő `div`.

```css
/* minden űrlap */
body .gform_wrapper { border: 1px solid red }
/* csak az 1-es űrlap */
body #gform_wrapper_1 { border: 1px solid red }
```

## Űrlap fejléce

A fejléc tartalmazza az űrlap címét és leírását.

```css
/* a fejléc (div): minden űrlap, majd az 1-es */
body .gform_wrapper .gform_heading { border: 1px solid red }
body #gform_wrapper_1 .gform_heading { border: 1px solid red }

/* az űrlap címe (h3) */
body .gform_wrapper .gform_heading .gform_title { color: red }
body #gform_wrapper_1 .gform_heading .gform_title { color: red }

/* az űrlap leírása (span) */
body .gform_wrapper .gform_heading .gform_description { border: 1px solid red }
body #gform_wrapper_1 .gform_heading .gform_description { border: 1px solid red }
```

## Űrlap törzse

### Törzs és mezőlista

```css
/* a törzs (div) */
body .gform_wrapper .gform_body { border: 1px solid red }
body #gform_wrapper_1 .gform_body { border: 1px solid red }

/* a mezőlista (ul), amely az összes mezőt tartalmazza */
body .gform_wrapper .gform_body .gform_fields { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields { border: 1px solid red }

/* egy mező (li) */
body .gform_wrapper .gform_body .gform_fields .gfield { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield { border: 1px solid red }
```

### Beviteli elem, leírás és kötelezőségjelző

A beviteli elem burkolója (`.ginput_container`), a mező leírása (`.gfield_description`) és a kötelezőségjelző (`.gfield_required`) három szinten célozható: minden űrlapon, egy űrlapon, vagy egyetlen mezőn. Az utolsó esetben a `#field_XX_X` helyére a mező azonosítóját írd, például `#field_1_3`.

```css
/* a beviteli elem burkolója (div) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container { border: 1px solid red }

/* a mező leírása (div) */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_description { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_description { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_description { border: 1px solid red }

/* a kötelezőségjelző (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label .gfield_required { color: red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label .gfield_required { color: red }
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_label .gfield_required { color: red }
```

## Űrlap élőlába

Az élőláb a küldés gombot és a szerkesztési hivatkozást (rendszergazdáknak) tartalmazza.

```css
/* az élőláb (div) */
body .gform_wrapper .gform_footer { border: 1px solid red }
body #gform_wrapper_1 .gform_footer { border: 1px solid red }

/* a küldés gomb (input) */
body .gform_wrapper .gform_footer input[type=submit] { border: 1px solid red }
body #gform_wrapper_1 .gform_footer input[type=submit] { border: 1px solid red }

/* a küldés gomb, ha képet használsz gombnak */
body .gform_wrapper .gform_footer input[type=image] { border: 1px solid red }
body #gform_wrapper_1 .gform_footer input[type=image] { border: 1px solid red }
```

## Megerősítő üzenet

A sikeres beküldés után ugyanazon az oldalon megjelenő üzenet.

```css
/* minden űrlap */
body .gform_confirmation_wrapper .gform_confirmation_message { border: 1px solid red; }
/* az 1-es űrlap */
body #gform_confirmation_wrapper_1 .gform_confirmation_message { color: black; }
```

## Ellenőrzési hibák

```css
/* a fő hibaüzenet az űrlap tetején (div) */
body .gform_wrapper .validation_error { border: 1px solid red }
body #gform_wrapper_1 .validation_error { border: 1px solid red }

/* a hibás értékű mezőt tartalmazó lista elem (li) */
body .gform_wrapper .gform_body .gform_fields .gfield_error { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error { border: 1px solid red }

/* a hibás mező alatti hibaüzenet (div) */
body .gform_wrapper .gform_body .gform_fields .gfield_error .validation_message { border: 1px solid red }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_error .validation_message { border: 1px solid red }
```

## Többoldalas űrlapok

Az alábbi választók a többoldalas űrlapok elemeit célozzák. Mindegyiknél az első sor minden űrlapra, a második az 1-es űrlapra vonatkozik.

### Haladásjelző

| Elem | Választó |
|---|---|
| Haladásjelző burkoló (div) | `.gform_wrapper .gf_progressbar_wrapper` |
| Haladásjelző címe, a „x. lépés / y” szöveg (h3) | `.gform_wrapper .gf_progressbar_wrapper .gf_progressbar_title` |
| A haladásjelző sáv (div) | `.gform_wrapper .gf_progressbar_wrapper .gf_progressbar` |
| A százalékos kitöltés sávja | `.gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage` |
| A kitöltöttség százalékos száma (span) | `.gform_wrapper .gf_progressbar_wrapper .gf_progressbar .gf_progressbar_percentage span` |

Egy adott űrlapra szűkítéshez cseréld a `.gform_wrapper` részt `#gform_wrapper_1`-re, például: `body #gform_wrapper_1 .gf_progressbar_wrapper .gf_progressbar_title { color: red }`.

### Lépések

| Elem | Választó |
|---|---|
| A lépések burkolója, az általad megadott lépésnevekkel (div) | `.gform_wrapper .gf_page_steps` |
| Minden lépés (div) | `.gform_wrapper .gf_page_steps .gf_step` |
| Az aktív lépés | `.gform_wrapper .gf_page_steps .gf_step_active` |
| A még nem elért (inaktív) lépés | `.gform_wrapper .gf_page_steps .gf_step_pending` |

### Oldalak, élőláb és gombok

| Elem | Választó |
|---|---|
| Egy oldalnyi mező burkolója (div) | `.gform_wrapper .gform_page` |
| Csak az 1-es űrlap 2. oldala | `#gform_wrapper_1 #gform_page_1_2` |
| Az oldal élőlába, a lapozógombokkal (div) | `.gform_wrapper .gform_body .gform_page_footer` |
| Következő gomb (input) | `.gform_wrapper .gform_body .gform_page_footer .gform_next_button` |
| Egy adott Következő gomb: az 1-es űrlap 1-es gombja | `#gform_wrapper_1 .gform_body .gform_page_footer #gform_next_button_1_1` |
| Előző gomb (input) | `.gform_wrapper .gform_body .gform_page_footer .gform_previous_button` |
| Egy adott Előző gomb: az 1-es űrlap 2-es gombja | `#gform_wrapper_1 .gform_body .gform_page_footer #gform_previous_button_1_2` |
| Küldés gomb az utolsó oldalon (input) | `.gform_wrapper .gform_body .gform_page_footer .gform_button` |

A táblázatban a választók a `body` elem után értendők, például: `body .gform_wrapper .gform_page { border: 1px solid red }`.

## Mentés és folytatás hivatkozás

A „Mentés és folytatás” hivatkozás az űrlap élőlábában van, ezért az élőláb választójával együtt célozhatod.

```css
/* minden űrlap */
body .gform_wrapper .gform_footer .gform_save_link { border: 1px solid red }
/* az 1-es űrlap */
body #gform_wrapper_1 .gform_footer .gform_save_link { border: 1px solid red }
/* az 1-es űrlap többoldalas változatának egy adott hivatkozása */
body #gform_wrapper_1 .gform_footer #gform_save_1_2_link { border: 1px solid red }
```

## Termék mező

Az egyetlen termék (Termék mező, egy termék típus) elemei. A `#field_XX_X` helyére a mező azonosítóját írd.

```css
/* a termék mező burkolója (div) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_singleproduct { border: 1px solid red; }

/* az ár felirata (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct .ginput_product_price_label { color: red; }

/* az ár (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct .ginput_product_price { color: red; }

/* a mennyiség beviteli mezője (input) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleproduct .ginput_quantity { border: 1px solid red; }
```

Mindegyik elemnél ugyanúgy szűkíthetsz egy űrlapra (`body #gform_wrapper_1 …`) vagy egyetlen mezőre (`#field_XX_X.gfield`).

## Bankkártya mező

A bankkártya mező elemei. Az alábbi választók a `body .gform_wrapper .gform_body .gform_fields .gfield` után folytatódnak, és ugyanúgy szűkíthetők egy űrlapra vagy egy mezőre, mint a többi elem.

| Elem | Választó (a `.gfield` után) |
|---|---|
| A bankkártya mező burkolója (div) | `.ginput_container_creditcard` |
| A kártyaikonok burkolója (div) | `.ginput_container_creditcard .gform_card_icon_container` |
| American Express ikon | `… .gform_card_icon_container .gform_card_icon_amex` |
| Discover ikon | `… .gform_card_icon_container .gform_card_icon_discover` |
| Mastercard ikon | `… .gform_card_icon_container .gform_card_icon_mastercard` |
| Visa ikon | `… .gform_card_icon_container .gform_card_icon_visa` |
| A kártyaszám beviteli mezője (input) | `.ginput_container_creditcard .ginput_full input` |
| A lejárati dátum burkolója (span) | `.ginput_container_creditcard .ginput_expiration_container` |
| A lejárat hónapja (select) | `… .ginput_expiration_container .ginput_card_expiration_month` |
| A lejárat éve (select) | `… .ginput_expiration_container .ginput_card_expiration_year` |
| A biztonsági kód burkolója (div) | `.ginput_container_creditcard .ginput_cardinfo_right` |
| A biztonsági kód beviteli mezője (input) | `… .ginput_cardinfo_right .ginput_card_security_code` |
| A biztonsági kód ikonja (span) | `… .ginput_cardinfo_right .ginput_card_security_code_icon` |

Példa a Visa ikon megcélzására egy adott mezőn:

```css
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_creditcard .gform_card_icon_container .gform_card_icon_visa { border: 1px solid red; }
```