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

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: 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ó:

.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.

.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.

.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.

.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.

.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).

.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ó.

.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.

.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:

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

Nagyobb beviteli elemek:

.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:

.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ő:

.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;
}