# CSS-választók az árazási, bejegyzés- és captcha-mezőkhöz (2.5-ös téma)

> A mennyiség, opció, szállítás, összesen, a bejegyzésmezők és a captcha mező elemeinek CSS-választói a régebbi, 2.5-ös témájú űrlapokban.

Ez a fejezet a [2.5-ös téma CSS-választói](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-regi-tema/) folytatása: az árazási mezők (Mennyiség, Opció, Szállítás, Összesen), a bejegyzésmezők és a captcha mező elemeit sorolja fel. A választók csak a 2.5-ös témájú űrlapokra vonatkoznak.

Minden elemnél három szint használható:

- **minden űrlap:** a `body .gform_wrapper …` kezdetű választó,
- **egy űrlap:** a `.gform_wrapper` helyett `#gform_wrapper_1`, ahol az `1` az űrlap azonosítója,
- **egyetlen mező:** a `.gfield` (vagy `.gfield_price`) helyett `#field_XX_X.gfield`, ahol az `XX_X` helyére a mező azonosítóját írd (például `#field_1_3`).

A példák feltűnő (piros) szabályt használnak, hogy lásd, melyik elemet találtad el.

## Árazási mezők

### Mennyiség mező

A mező burkolója egy `div`, benne a beviteli elem (`input`). Az árazási mezők `.gfield_price` osztályt kapnak.

```css
/* a burkoló (div): minden űrlap, egy űrlap, egy mező */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_number { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_number { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_number { border: 1px solid red; }

/* a beviteli elem (input) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_number input { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_number input { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_number input { border: 1px solid red; }
```

### Opció mező

Az Opció mező egy legördülő lista (`select`), a választható elemek `option` elemek.

```css
/* a burkoló (div) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_select { border: 1px solid red; }

/* a legördülő lista (select) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_select select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_select select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_select select { border: 1px solid red; }

/* a lista elemei (option) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_select select option { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_select select option { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_select select option { border: 1px solid red; }
```

### Szállítás mező

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

/* a címke (label) */
body .gform_wrapper .gform_body .gform_fields .gfield_shipping .gfield_label { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_shipping .gfield_label { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_shipping .gfield_label { border: 1px solid red; }

/* a szállítási díj (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleshipping .ginput_shipping_price { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_singleshipping .ginput_shipping_price { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_singleshipping .ginput_shipping_price { color: red; }
```

### Összesen mező

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

/* a végösszeg (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_total .ginput_total { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_total .ginput_total { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_total .ginput_total { color: red; }
```

## Bejegyzésmezők

Mind az öt bejegyzésmező ugyanúgy épül fel: egy burkoló `div` (`.ginput_container_<típus>`), benne a beviteli elem. A táblázat a burkolók osztályát mutatja.

| Mező | Burkoló osztálya |
|---|---|
| Bejegyzés címe | `.ginput_container_post_title` |
| Bejegyzés törzse | `.ginput_container_post_content` |
| Bejegyzés kivonata | `.ginput_container_post_excerpt` |
| Bejegyzés címkéi | `.ginput_container_post_tags` |
| Bejegyzés képe | `.ginput_container_post_image` |

A burkolót és a benne lévő `input` elemet így célozhatod meg (a `post_title` helyére a táblázat szerinti osztály kerül):

```css
/* a burkoló (div): minden űrlap, egy űrlap, egy mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_post_title { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_post_title { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_post_title { border: 1px solid red; }

/* a beviteli elem (input) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_post_title input { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_post_title input { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_post_title input { color: red; }
```

A törzs, a kivonat, a címkék és a kép elemeit ugyanezzel a mintával érheted el, a burkoló osztályát cserélve. Például a bejegyzés képének beviteli elemét minden űrlapon:

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

## Captcha mező

A captcha mezőnek két változata van, mindegyiknek más a felépítése.

### reCAPTCHA

A reCAPTCHA jelölését külső szolgáltatás szúrja be dinamikusan, ezért csak a burkolóját célozhatod.

```css
/* minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area { border: 1px solid red; }
/* az 1-es űrlap */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area { border: 1px solid red; }
```

Ha a reCAPTCHA burkolóját az újabb jelölés szerint akarod elérni, használd a `.ginput_recaptcha` osztályt:

```css
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_recaptcha { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_recaptcha { border: 1px solid red; }
```

### Really Simple CAPTCHA

| Elem | Választó (a `body .gform_wrapper .gform_body .gform_fields .gfield` után) |
|---|---|
| A kép és a beviteli elem közös burkolója (div) | `.gfield_captcha_container` |
| A captcha képe (img) | `.gfield_captcha_container .gfield_captcha` |
| A beviteli mező (input) | `.gfield_captcha_container .gfield_captcha_input_container input` |

Egy adott űrlapra szűkítve a `.gform_wrapper` helyett `#gform_wrapper_1` szerepel, például:

```css
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha { border: 1px solid red; }
```