# CSS-választók az Orbital téma Rádiógombok és Jelölőnégyzetek mezőihez

> A Rádiógombok és a Jelölőnégyzetek 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 **Rádiógombok** és **Jelölőnégyzetek** 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.

Mindkét mező közös szerkezete az Orbital témában: a lista tárolója egy `div` (a régi témában `ul` volt), a lehetőségek egy-egy `div.gchoice` elemben vannak (a régi témában `li`). A rádiógombok és jelölőnégyzetek a böngésző natív elemei, 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.

| | Rádiógombok | Jelölőnégyzetek |
|---|---|---|
| Mező osztálya | `.gfield--type-radio` | `.gfield--type-checkbox` |
| Lista tárolója | `.gfield_radio` | `.gfield_checkbox` |
| Beviteli elem | `input.gfield-choice-input` (`type="radio"`) | `input.gfield-choice-input` (`type="checkbox"`) |
| Belső jelölő mérete | `--gf-ctrl-radio-check-size`, `--gf-ctrl-radio-check-radius` | `--gf-ctrl-checkbox-check-size` |

A mező azonosítója `field_{űrlap}_{mező}` alakú (például `field_5_3`). A következőkben a `{típus}` helyén `radio` vagy `checkbox` áll, a lista osztálya pedig `.gfield_radio` vagy `.gfield_checkbox`. A példák a rádiógombokra mutatnak, ha mást nem írunk, a jelölőnégyzetekre ugyanígy cserélhető.

## Tároló

A tároló kiegészítő elrendezéséhez használd a `.ginput_container_radio` osztályt (jelölőnégyzetnél a mező burkolóját). A burkoló közvetlenül is formázható:

```css
.gform-theme--framework .gfield--type-radio {
	background-color: #f9f9f9;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 12px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-radio {
	background-color: #f9f9f9;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 12px;
}
```

## A lista és a távolságok

A lista tárolója határozza meg a lehetőségek közti távolságot a `--gf-field-choice-gap` változóval.

```css
.gform-theme--framework .gfield--type-radio .gfield_radio {
	--gf-field-choice-gap: 16px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox .gfield_checkbox {
	--gf-field-choice-gap: 20px;
}

/* egy adott mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 .gfield_radio {
	--gf-field-choice-gap: 12px;
}
```

## A lehetőségek

Minden lehetőség egy `div.gchoice`. Az egyes lehetőségeket megcélozhatod a `gchoice_{űrlap}{mező}{sorszám}` osztállyal is.

```css
.gform-theme--framework .gfield--type-radio .gchoice {
	padding: 4px 0;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-radio .gchoice {
	margin-bottom: 8px;
}
```

## A lehetőségek feliratai

A lehetőségek feliratainak osztálya `.gform-field-label` és `.gform-field-label--type-inline`. A színüket és méretüket a másodlagos címkeváltozók adják; ezek a lehetőségek feliratára hatnak, a mező fő címkéjére nem.

```css
.gform-theme--framework .gfield--type-radio {
	--gf-ctrl-label-color-secondary: #1a365d;
	--gf-ctrl-label-font-size-secondary: 16px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-label-color-secondary: #0f172a;
}
```

## A beviteli elemek

Az elemek mérete a `--gf-ctrl-choice-size` változóval állítható. A rádiógombnál a belső kijelölésjelző pontot a `--gf-ctrl-radio-check-size` és a `--gf-ctrl-radio-check-radius`, a jelölőnégyzet pipáját a `--gf-ctrl-checkbox-check-size` szabja (literális px értékkel). A kijelölt állapot színe a `--gf-ctrl-choice-check-color`.

```css
.gform-theme--framework .gfield--type-radio {
	--gf-ctrl-choice-size: 20px;
	--gf-ctrl-radio-check-size: 7px;
	--gf-ctrl-radio-check-radius: 50%;
}

.gform-theme--framework .gfield--type-checkbox {
	--gf-ctrl-choice-size: 20px;
	--gf-ctrl-checkbox-check-size: 14px;
}

/* egyedi kiemelőszín */
.gform-theme--framework#gform_wrapper_112 .gfield--type-radio {
	--gf-ctrl-choice-check-color: #204ce5;
}
```

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

A fő címke a `.gform-field-label`; a színe és mérete `--gf-ctrl-label-color-primary` és `--gf-ctrl-label-font-size-primary`. A leírás a leírás helyétől függően a lehetőségek fölött vagy alatt látszik (`--gf-ctrl-desc-color`, `--gf-ctrl-desc-font-size`).

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

## Az „Egyéb” lehetőség (rádiógombok)

Ha be van kapcsolva az „Egyéb” választás, az „Egyéb” lehetőséghez tartozó szövegmező a `.gchoice_other_control` elemben van. A szélessége a `--gf-field-choice-other-ctrl-max-width` változóval állítható.

```css
.gform-theme--framework .gfield--type-radio .gchoice_other_control {
	--gf-field-choice-other-ctrl-max-width: 256px;
}
```

## Az összes kijelölése gomb (jelölőnégyzetek)

Ha be van kapcsolva az **Az összes kiválasztásának bekapcsolása**, a lehetőségek alatt a `.gfield-choice-toggle-all` elemben egy `gfield_choice_all_toggle` osztályú gomb jelenik meg, és a lista megkapja a `.gfield_choice--select_all_enabled` osztályt. A gomb a keretrendszer gombstílusát és méretét örökli.

```css
.gform-theme--framework .gfield--type-checkbox .gfield-choice-toggle-all {
	margin-top: 12px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox .gfield_choice_all_toggle {
	--gf-ctrl-btn-bg-color-primary: #204ce5;
	--gf-ctrl-btn-color-primary: #ffffff;
}
```

## Használati példák

Nagyobb térköz a lehetőségek között:

```css
.gform-theme--framework .gfield--type-radio .gfield_radio,
.gform-theme--framework .gfield--type-checkbox .gfield_checkbox {
	--gf-field-choice-gap: 24px;
}
```

Nagyobb beviteli elemek:

```css
.gform-theme--framework .gfield--type-radio {
	--gf-ctrl-choice-size: 22px;
	--gf-ctrl-radio-check-size: 8px;
}

.gform-theme--framework .gfield--type-checkbox {
	--gf-ctrl-choice-size: 24px;
	--gf-ctrl-checkbox-check-size: 16px;
}
```

Vízszintes elrendezés a rádiógomboknál. Vízszintes elrendezésnél a lista a `--gf-field-choice-align-x-gap-y` és a `--gf-field-choice-align-x-gap-x` változóval kap térközt:

```css
.gform-theme--framework .gfield--type-radio.gfield--choice-align-horizontal .gfield_radio {
	--gf-field-choice-align-x-gap-y: 12px;
	--gf-field-choice-align-x-gap-x: 16px;
}
```

Egy adott mező:

```css
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
	--gf-ctrl-label-color-primary: #0f172a;
	--gf-ctrl-label-color-secondary: #334155;
	--gf-field-choice-gap: 12px;
}
```