# Mezők CSS-választói a 2.5-ös témában

> Az egysoros szöveg, szám, legördülő, rádiógomb, jelölőnégyzet, küldés gomb, többválasztós, hozzájárulás, dátum, idő, lista, név, cím, e-mail, weboldal, fájlfeltöltés és HTML mező CSS-választói a régebbi, 2.5-ös témájú űrlapokhoz.

Ez a fejezet a régebbi, 2.5-ös témájú űrlapok mezőinek választóit gyűjti össze. Az újabb, Orbital témájú űrlapokra nem érvényesek. Az űrlap egészének elemeit (burkoló, fejléc, élőláb, hibák, többoldalas űrlap) a [2.5-ös téma CSS-választói](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-regi-tema/) fejezet, az árazási, bejegyzés- és captcha-mezőket a [következő fejezet](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-ar-es-bejegyzes-mezok/) tartalmazza.

A legtöbb elem háromféleképpen célozható:

| Hatókör | Mire hat | Mit kell cserélned |
|---|---|---|
| `body .gform_wrapper …` | minden űrlap | semmit |
| `body #gform_wrapper_1 …` | csak az 1-es azonosítójú űrlap | az `1` helyére a saját űrlapod azonosítóját írd |
| `body … #field_XX_X.gfield …` | csak egy adott mező | az `XX_X` helyére a mező azonosítóját írd, például `field_1_3` |

Az alábbi példák a rövidség kedvéért a „minden űrlap” alakot mutatják. A másik két alakhoz cseréld a `.gform_wrapper` részt `#gform_wrapper_1`-re, vagy a `.gfield` részt `#field_XX_X.gfield`-re. A példák feltűnő (piros) szabályt használnak, hogy lásd, melyik elemet találtad el.

## Egysoros szöveg mező

Három elem célozható: a burkoló (`div`), a beviteli mező (`input`) és a maximális karakterszám számlálója.

```css
/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_text { border: 1px solid red }
/* beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_text input[type=text] { border: 1px solid red }
/* karakterszámláló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_text .charleft { border: 1px solid red }
/* csak az 1-es űrlap beviteli mezője */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_text input[type=text] { border: 1px solid red }
/* csak egy adott mező beviteli mezője */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_text input[type=text] { border: 1px solid red }
```

## Szám mező

A burkoló (`div`), a beviteli mező (`input`) és az elfogadott tartományt leíró útmutató (`div.instruction`) célozható.

```css
/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_number { border: 1px solid red }
/* beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_number input { color: red }
/* az elfogadott tartomány útmutatója */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_number div.instruction { color: red }
/* csak az 1-es űrlap, vagy csak egy adott mező: a már ismert módon */
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_number input { color: red }
```

## Legördülő mező

A burkoló a `.ginput_container_select`. Ha a mezőn be van kapcsolva a **Továbbfejlesztett felület** beállítás, a `.ginput_container_select` helyett a `.chosen-container` osztályt kell célozni.

```css
/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_select { border: 1px solid red }
/* csak az 1-es űrlapon */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_select { border: 1px solid red }
/* egy adott mezőn */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_select { border: 1px solid red }
```

A lista (`select`) és az elemei (`option`) a böngésző saját elemei, nem a bővítmény rajzolja őket. Ezért böngészőnként, eszközönként és rendszerenként kissé eltérhet a kinézetük, és csak CSS-sel nem szabhatók testre olyan szabadon, mint az űrlap többi eleme.

```css
/* a lista */
body .gform_wrapper .gform_body .gform_fields .gfield select { border: 1px solid red }
/* egy elem a listában */
body .gform_wrapper .gform_body .gform_fields .gfield select option { color: red }
/* csak az 1-es űrlapon */
body #gform_wrapper_1 .gform_body .gform_fields .gfield select option { color: red }
/* egy adott mezőn */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield select option { color: red }
```

## Rádiógombok és Jelölőnégyzetek mező

A két mező felépítése azonos: a lehetőségeket egy rendezetlen lista (`ul`) fogja össze, minden lehetőség egy listaelem (`li`), benne a felirat (`label`) és a bemenet (`input`). A rádiógomboknál a lista osztálya `.gfield_radio`, a jelölőnégyzeteknél `.gfield_checkbox`.

| Elem | Rádiógombok | Jelölőnégyzetek |
|---|---|---|
| Lista | `.gfield .gfield_radio` | `.gfield .gfield_checkbox` |
| Lehetőség | `.gfield .gfield_radio li` | `.gfield .gfield_checkbox li` |
| Felirat | `.gfield .gfield_radio li label` | `.gfield .gfield_checkbox li label` |
| Bemenet | `.gfield .gfield_radio li input[type=radio]` | `.gfield .gfield_checkbox li input[type=checkbox]` |

A táblázat kijelölői a `body .gform_wrapper .gform_body .gform_fields` után folytatódnak. Egy adott űrlapra szűkítéshez a `.gform_wrapper` helyett `#gform_wrapper_1`-et, egy adott mezőre a `.gfield` helyett `#field_XX_X.gfield`-et írj:

```css
/* minden űrlap: a rádiógombok listája */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio { border: 1px solid red }
/* csak az 1-es űrlap: a jelölőnégyzetek lehetőségei */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox li { border: 1px solid red }
/* egy adott mező: a rádiógombok feliratai */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio li label { border: 1px solid red }
```

A rádiógomb és a jelölőnégyzet is böngészőelem, 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.

## Küldés gomb

Az alap kijelölő a küldés gombra:

```css
/* minden űrlap */
body .gform_wrapper .gform_footer input[type=submit] { border: 1px solid red }
/* csak az 1-es űrlap */
body #gform_wrapper_1 .gform_footer input[type=submit] { border: 1px solid red }
```

Ha az űrlap képet használ gombnak, az `input[type=image]` kijelölőt használd ugyanígy.

### Stílusminták

Alapstílus (szín, kitöltés, szegély, lekerekítés, árnyék, háttér):

```css
body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type="submit"] {
    color: #ffffff;
    padding: 4px 10px;
    border: 1px solid rgba(114, 114, 114, 0.4);
    border-radius: 3px;
    box-shadow: 0 1px 0px rgba(114, 114, 114, 0.3);
    background-color: #0096d6;
}
```

Rámutatáskor (hover) más szegély és háttér:

```css
body .gform_wrapper .gform_footer input[type="submit"]:hover {
    border: 1px solid rgba(114, 114, 114, 0.6);
    background-color: #444444;
}
```

Lenyomott állapotban a gomb egy pixelt lejjebb csúszik:

```css
body .gform_wrapper .gform_footer input[type="submit"]:active {
    top: 1px;
}
```

### A gomb elrejtése

A megszokott `display: none` nem jó erre: ilyenkor az űrlap beküldéskezelője megszakítja a küldést. Ehelyett vidd ki a gombot a képernyőről:

```css
body #gform_wrapper_1 .gform_footer input[type="submit"] {
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}
```

## Többválasztós mező

Három elem célozható: a burkoló (`div`), a lista (`select`) és a lista elemei (`option`).

```css
/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect { border: 1px solid red }
/* a lista */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect select { border: 1px solid red }
/* egy elem a listában */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect select option { border: 1px solid red }
```

Ha a mezőn be van kapcsolva a **Továbbfejlesztett felület** (Enhanced UI) beállítás, a `select` helyett a `chosen-container` osztályt kell célozni.

## Hozzájárulás mező

| Elem | Választó |
|---|---|
| Burkoló | `body .gform_body .gform_fields .ginput_container.ginput_container_consent` |
| A jelölőnégyzet felirata | `body .gform_wrapper .gform_body .gform_fields .gfield .gfield_consent_label` |
| A jelölőnégyzet (input) | `body .gform_wrapper .gform_body .gform_fields .ginput_container_consent input[type=checkbox]` |
| A leírás (div) | `body .gform_wrapper .gform_body .gform_fields .gfield .gfield_consent_description` |

Egy adott űrlapra szűkítéshez a `.gform_wrapper` helyett itt is `#gform_wrapper_1`-et írj (a burkolónál az űrlap-azonosítós alakot a `.gform_body` elé tedd).

## Dátum mező

A dátum mező két beviteli módban jelenik meg, ezért két csoport választó van.

### Dátumválasztó

```css
/* a beviteli mező (input) */
body .gform_wrapper .gform_body .gform_fields .gfield .datepicker { border: 1px solid red }
/* a naptár ikonja (img) */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_input_datepicker_icon { border: 1px solid red }
```

### Dátummező (hónap, nap, év külön)

Mindhárom részhez három elem tartozik: a burkoló (`div`, a beviteli mezőt és az alfeliratot tartalmazza), a beviteli mező és az alcímke.

| Rész | Burkoló | Beviteli mező | Alcímke |
|---|---|---|---|
| Hónap | `.gfield .gfield_date_month` | `.gfield .gfield_date_month input` | `.gfield .gfield_date_month label` |
| Nap | `.gfield .gfield_date_day` | `.gfield .gfield_date_day input` | `.gfield .gfield_date_day label` |
| Év | `.gfield .gfield_date_year` | `.gfield .gfield_date_year input` | `.gfield .gfield_date_year label` |

A táblázat kijelölői a `body .gform_wrapper .gform_body .gform_fields` után folytatódnak, például:

```css
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label { color: red }
```

## Idő mező

| Rész | Burkoló (div) | Beviteli mező (input) | Alcímke (label) |
|---|---|---|---|
| Óra | `.gfield .gfield_time_hour` | `.gfield .gfield_time_hour input` | `.gfield .gfield_time_hour label` |
| Perc | `.gfield .gfield_time_minute` | `.gfield .gfield_time_minute input` | `.gfield .gfield_time_minute label` |

A de./du. (AM/PM) választónak burkolója és legördülő listája van:

| Elem | Választó |
|---|---|
| Burkoló (div) | `.gfield .gfield_time_ampm` |
| Választó (select) | `.gfield .gfield_time_ampm select` |

Itt is a `body .gform_wrapper .gform_body .gform_fields` után folytatódnak a kijelölők:

```css
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour input { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm select { border: 1px solid red }
```

## Lista mező

A lista mező kijelölői nem igénylik a `body .gform_body .gform_fields` előtagot. Mindegyik háromféle hatókörben használható (minden űrlap: `.gform_wrapper`, egy űrlap: `#gform_wrapper_1`, egy mező: `#field_XX_X.gfield`).

| Elem | Választó (minden űrlap) |
|---|---|
| Burkoló | `.gform_wrapper .ginput_container_list` |
| Fejlécek (oszlopcímkék) | `.gform_wrapper .gfield_list_header.gform-grid-row` |
| Egy oszlop | `.gform_wrapper .gfield_list_X_cellY` (az `X` a mező azonosítója, az `Y` az oszlop sorszáma) |
| Páratlan sorok | `.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_odd` |
| Páros sorok | `.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_even` |
| Minden sor | `.gform_wrapper .gfield_list_group.gform-grid-row` |
| Cellák | `.gform_wrapper .gfield_list_group_item.gfield_list_cell` |
| A sor hozzáadó és törlő ikonjainak sora | `.gform_wrapper .gfield_list_icons.gform-grid-col` |
| Sor hozzáadása ikon | `.gfield_list_icons .add_list_item` |
| Sor törlése ikon | `.gfield_list_icons .remove_list_item` |

Néhány példa:

```css
/* az 1-es űrlap 1-es mezőjének első oszlopa */
#gform_wrapper_1 .gfield_list_1_cell1 { border: 2px solid #333333; }

/* váltakozó színű sorok */
.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_odd { background: #eeeeee; }

/* a sorok hozzáadását és törlését végző ikonok elrejtése az 1-es űrlapon */
#gform_wrapper_1 .gfield_list_icons .add_list_item { display: none; }
#gform_wrapper_1 .gfield_list_icons .remove_list_item { display: none; }
```

## Név mező

A név mező keresztnév és vezetéknév részének ugyanaz a három eleme van: burkoló (`span`), beviteli mező (`input`) és alcímke (`label`).

| Rész | Burkoló | Beviteli mező | Alcímke |
|---|---|---|---|
| Keresztnév | `.gfield .name_first` | `.gfield .name_first input` | `.gfield .name_first label` |
| Vezetéknév | `.gfield .name_last` | `.gfield .name_last input` | `.gfield .name_last label` |

A kijelölők a `body .gform_wrapper .gform_body .gform_fields` után folytatódnak:

```css
body .gform_wrapper .gform_body .gform_fields .gfield .name_first input { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .name_last label { color: red; }
```

## Cím mező

A cím mező minden része (burkoló, beviteli mező, alcímke) külön célozható.

| Rész | Burkoló (div) | Beviteli mező | Alcímke (label) |
|---|---|---|---|
| Cím, 1. sor | `.gfield .address_line_1` | `.gfield .address_line_1 input` | `.gfield .address_line_1 label` |
| Cím, 2. sor | `.gfield .address_line_2` | `.gfield .address_line_2 input` | `.gfield .address_line_2 label` |
| Város | `.gfield .address_city` | `.gfield .address_city input` | `.gfield .address_city label` |
| Állam, megye | `.gfield .address_state` | `.gfield .address_state input` | `.gfield .address_state label` |
| Irányítószám | `.gfield .address_zip` | `.gfield .address_zip input` | `.gfield .address_zip label` |
| Ország | `.gfield .address_country` | `.gfield .address_country select` | `.gfield .address_country label` |

Az ország beviteli eleme legördülő lista (`select`), nem szövegmező. A kijelölők itt is a `body .gform_wrapper .gform_body .gform_fields` után folytatódnak:

```css
body .gform_wrapper .gform_body .gform_fields .gfield .address_city input { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .address_country select { border: 1px solid red; }
```

## E-mail és weboldal mező

Mindkét mezőnek két eleme van: a burkoló (`div`) és a beviteli mező (`input`).

```css
/* e-mail mező: burkoló, majd a beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_email { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_email input { border: 1px solid red; }

/* weboldal mező: burkoló, majd a beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_website { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_website input { border: 1px solid red; }
```

## Fájlfeltöltés mező

Az egyfájlos feltöltésnek két eleme van: a burkoló és a fájlválasztó beviteli mező.

```css
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload input { color: red; }
```

A többfájlos feltöltésnél a burkolón kívül további elemek is célozhatók:

| Elem | Választó (a `.gfield` után) |
|---|---|
| A feltöltési útmutató szövege (span) | `.ginput_container_fileupload .gform_drop_instructions` |
| Hibaüzenet (div) | `.ginput_container_fileupload .validation_message` |
| Fájlkiválasztó gomb (input) | `.ginput_container_fileupload .gform_button_select_files` |

```css
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files { color: red; }
```

## HTML mező

A HTML mező egyetlen listaelem (`li`):

```css
/* minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield_html { border: 1px solid red }
/* csak az 1-es űrlap */
body #gform_wrapper_1 .gform_body .gform_fields .gfield_html { border: 1px solid red }
/* csak egy adott HTML mező */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield_html { border: 1px solid red }
```

Figyeld meg, hogy az adott mezőre szűkítésnél itt a `#field_XX_X.gfield_html` alak kell, nem a `.gfield`.

## Bekezdés szövege mező

Három elem célozható: a burkoló (`div`), a beviteli mező (`textarea`) és a maximális karakterszám számlálója.

```css
/* burkoló, minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_textarea { border: 1px solid red }
/* beviteli mező, minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_textarea textarea { color: red }
/* karakterszámláló, minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_textarea .charleft { color: red }
/* csak az 1-es űrlap beviteli mezője */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_textarea textarea { color: red }
/* csak egy adott mező beviteli mezője */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_textarea textarea { color: red }
```

A burkolóra és a karakterszámlálóra az 1-es űrlapra és az adott mezőre szűkítés ugyanígy működik: a `.gform_wrapper` helyére `#gform_wrapper_1`, a `.gfield` helyére `#field_XX_X.gfield` kerül.

## Szakasz mező

A Szakasz mező három eleme célozható: a burkoló (`li`, `.gsection` osztállyal), a cím (`h2`, `.gsection_title`) és a leírás (`div`, `.gsection_description`).

```css
/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gsection { border: 1px solid red }
/* cím */
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title { color: red }
/* leírás */
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description { border: 1px solid red }
/* csak az 1-es űrlap címe */
body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_title { color: red }
/* csak egy adott Szakasz mező címe */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection .gsection_title { color: red }
```

A burkolóra és a leírásra a szűkítés ugyanígy megy. Az adott mezőre szűkítésnél itt is a `#field_XX_X.gsection` alak kell, nem a `.gfield`.