CSS-választók az Orbital téma Dátum, Idő, Lista és CAPTCHA mezőihez

Ez a fejezet az Orbital témájú űrlapok Dátum, Idő, Lista és CAPTCHA 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. A mező azonosítója field_{űrlap}_{mező} alakú (például field_5_3).

Dátum mező

A Dátum mezőnek három beviteli típusa van:

Típus	Mit jelenít meg	A mező osztálya
Dátumválasztó	egyetlen szövegmező, kívánság szerint naptárikonnal	.gfield--input-type-datepicker (a tárolója .ginput_container_date)
Dátum mező	külön hónap, nap és év mező	.gfield--input-type-datefield
Dátum legördülő	hónap, nap és év legördülő listája	.gfield--input-type-datedropdown

A mező burkolója mindig megkapja a .gfield--type-date osztályt is. A „Dátum mező” és a „Dátum legördülő” részei a .gfield_date_month, .gfield_date_day, .gfield_date_year, illetve a .gfield_date_dropdown_month, .gfield_date_dropdown_day, .gfield_date_dropdown_year; mind a .ginput_container.ginput_complex.gform-grid-row elemben vannak. Az alcímkék osztálya .gform-field-label.gform-field-label--type-sub.

A mező burkolója

.gform-theme--framework .gfield--type-date {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
  --gf-field-date-width: 168px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-date {
  --gf-ctrl-label-color-primary: #112337;
  --gf-field-date-width: 140px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

Dátumválasztó

A beviteli mező a .ginput_container_date elemben lévő szövegmező.

.gform-theme--framework .gfield--input-type-datepicker {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #9ca3af;
  --gf-ctrl-font-size: 16px;
}

Alapértelmezett naptárikon. Az ikont egy ::after pszeudoelem rajzolja, a mező ilyenkor a .gfield--datepicker-default-icon osztályt kapja.

.gform-theme--framework .gfield--datepicker-default-icon {
  --gf-field-date-icon-color: #4b5563;
  --gf-field-date-icon-color-hover: #1f2937;
}

Saját ikonkép. Saját képnél egy img elem jelenik meg, a mező a .gfield--datepicker-custom-icon osztályt kapja.

.gform-theme--framework .gfield--datepicker-custom-icon {
  --gf-field-date-custom-icon-max-height: 20px;
  --gf-field-date-custom-icon-max-width: 20px;
  --gf-field-date-custom-icon-opacity: 0.8;
  --gf-field-date-custom-icon-opacity-hover: 1;
}

Ikon nélkül. Ha nincs ikon kiválasztva, a mező a .gfield--datepicker-no-icon osztályt kapja:

.gform-theme--framework#gform_wrapper_112 .gfield--datepicker-no-icon {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #e5e7eb;
}

Dátum mező (hónap, nap, év)

A hónap, a nap és az év mezőt külön-külön, ugyanazokkal a változókkal stílusozhatod; az alcímke színét és méretét a harmadlagos címkeváltozók adják.

/* hónap */
.gform-theme--framework .gfield_date_month {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-radius: 6px;
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
}

/* nap */
.gform-theme--framework .gfield_date_day {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-label-color-tertiary: #1a365d;
}

/* év */
.gform-theme--framework .gfield_date_year {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-label-color-tertiary: #1a365d;
}

Egységes megjelenés mindhárom mezőre:

.gform-theme--framework .gfield_date_month,
.gform-theme--framework .gfield_date_day,
.gform-theme--framework .gfield_date_year {
  --gf-ctrl-bg-color: #f9fafb;
  --gf-ctrl-border-color: #e5e7eb;
  --gf-ctrl-radius: 6px;
}

Dátum legördülő

A legördülő változatban select elemek vannak a .gfield_date_dropdown_month, .gfield_date_dropdown_day és .gfield_date_dropdown_year elemekben.

.gform-theme--framework .gfield_date_dropdown_month,
.gform-theme--framework .gfield_date_dropdown_day,
.gform-theme--framework .gfield_date_dropdown_year {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #e5e7eb;
  --gf-field-date-width: 168px;
}

Szélesség és adott mező

A --gf-field-date-width változóval szélesítheted a dátummezőket (például 200px). Egy adott dátummezőt az azonosítójával célozhatsz:

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-field-date-width: 160px;
}

Idő mező

Az Idő mező órát és percet kér be. Az almezők a .ginput_container.ginput_complex.gform-grid-row elemben vannak:

• .gfield_time_hour: az óra beviteli mezője (számmező);
• .gfield_time_minute: a perc beviteli mezője;
• .gfield_time_ampm: a de./du. (AM/PM) választó, csak 12 órás formátumnál.

Az alcímkék osztálya .gform-field-label--type-sub, az óráé .hour_label, a percé .minute_label. 24 órás formátumnál a de./du. választó a .gf_hide_ampm osztállyal rejtett. A mező burkolója .gfield--type-time.

A mező burkolója

.gform-theme--framework .gfield--type-time {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
  --gf-field-time-width: 140px;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

Óra és perc

/* óra */
.gform-theme--framework .gfield--type-time .gfield_time_hour {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-time .gfield_time_hour .hour_label {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
}

/* perc */
.gform-theme--framework .gfield--type-time .gfield_time_minute {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
}

.gform-theme--framework .gfield--type-time .gfield_time_minute .minute_label {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 14px;
}

De./du. választó

A tároló osztályai .gfield_time_ampm.ginput_container.ginput_container_time.gform-grid-col; a benne lévő natív select stílusa:

.gform-theme--framework .gfield--type-time .gfield_time_ampm {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
}

Használati példák

Szélesebb mezők, egységes óra és perc, a de./du. választó elrejtése:

.gform-theme--framework .gfield--type-time {
  --gf-field-time-width: 160px;
}

.gform-theme--framework .gfield--type-time .gfield_time_hour,
.gform-theme--framework .gfield--type-time .gfield_time_minute {
  --gf-ctrl-bg-color: #f9fafb;
  --gf-ctrl-border-color: #e5e7eb;
  --gf-ctrl-radius: 6px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-time .gfield_time_ampm {
  display: none;
}

Lista mező

A Lista mezőben a látogató sorokat vehet fel és törölhet. Két üzemmódja van: egy oszlop (soronként egy beviteli mező) és több oszlop (soronként több, címkézett oszlop). Az Orbital témában a Lista táblázat helyett div-alapú rácsot használ: .gform-grid-row és .gform-grid-col.

A szerkezet:

• a mező burkolója egy fieldset, .gfield--type-list (vagy .gfield--input-type-list) osztállyal;
• a tároló .ginput_container_list, több oszlopos módban .ginput_container_list--columns is;
• az oszlopfejléc .gfield_list_header (a .gform-grid-row is rajta van), az egyes oszlopcímkék .gform-field-label.gfield_header_item.gform-grid-col, az ikonoszlopé .gfield_header_item--icons;
• minden sor .gfield_list_group (.gform-grid-row), és páratlan/páros sor szerint .gfield_list_row_odd vagy .gfield_list_row_even;
• a cellák .gfield_list_group_item.gfield_list_cell, és egy oszlopazonosító osztályt is kapnak: .gfield_list_{mező}_cell{oszlop} (például .gfield_list_3_cell1);
• a hozzáadás és törlés vezérlői .add_list_item és .delete_list_item, ezek a mező beállításaitól függően gombként vagy ikonos hivatkozásként jelennek meg.

A cellák input, select vagy textarea elemet tartalmazhatnak a gform_column_input szűrő szerint.

A mező burkolója és a tároló

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

.gform-theme--framework .gfield--type-list .ginput_container_list {
  --gf-ctrl-border-color: #e5e7eb;
}

.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

Fejléc és oszlopok

/* oszlopcímkék */
.gform-theme--framework .gfield--type-list .gfield_list_header .gfield_header_item {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* a 3-as Lista mező 1. oszlopa */
.gform-theme--framework .gfield--type-list .gfield_list_3_cell1 {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

/* csak az első oszlop, mezőazonosító nélkül */
.gform-theme--framework .gfield--type-list .gfield_list_group_item.gfield_list_cell:first-child {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-border-color: #cbd5e1;
}

Sorok

A sorok közti függőleges távolságot a --gf-field-gap-y változó adja.

/* váltakozó sorszínek */
.gform-theme--framework .gfield--type-list .gfield_list_row_odd {
  background-color: #f9fafb;
}

.gform-theme--framework .gfield--type-list .gfield_list_row_even {
  background-color: #ffffff;
}

/* minden sor */
.gform-theme--framework .gfield--type-list .gfield_list_group {
  border-bottom: 1px solid #e5e7eb;
}

.gform-theme--framework .gfield--type-list .ginput_container_list {
  --gf-field-gap-y: 16px;
}

Cellák

A cellák beviteli elemeit a cella hatókörében állított vezérlőváltozókkal stílusozhatod:

.gform-theme--framework .gfield--type-list .gfield_list_group_item {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
}

Ha az elrendezés egymás alá tördelődik (például kisebb kijelzőn), minden cella a saját oszlopcímkéjét egy ::before pszeudoelemben jeleníti meg, a szöveg a content: attr(data-label) szabállyal jön létre:

.gform-theme--framework .gfield--type-list .gfield_list_group_item::before {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 14px;
}

Ikonok

A hozzáadás és törlés ikonjai a .gfield_list_icons.gform-grid-col elemben vannak. A köztük lévő távolságot és a szélességet a --gf-field-list-btns-gap és a --gf-field-list-btns-width állítja. Az ikonok mérete és formája változókkal módosítható:

.gform-theme--framework .gfield--type-list .gfield_list_icons {
  --gf-field-list-btns-gap: 12px;
}

.gform-theme--framework .gfield--type-list {
  --gf-field-list-btn-size: 20px;
  --gf-field-list-btn-radius: 6px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-list {
  --gf-field-list-btn-size: 18px;
  --gf-field-list-btn-padding-y: 2px;
  --gf-field-list-btn-padding-x: 2px;
}

A láthatóságra nincs változó, ezért egy ikon elrejtéséhez közvetlen tulajdonság kell:

/* sor hozzáadása ikon elrejtése a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .add_list_item {
  display: none;
}

/* sor törlése ikon elrejtése a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 .gfield--type-list .delete_list_item {
  display: none;
}

CAPTCHA mező

A CAPTCHA mező a reCAPTCHA-t (Google v2) támogatja. A reCAPTCHA saját, harmadik féltől származó jelölést (iframe-et) illeszt a .ginput_recaptcha elembe, ezért a belső megjelenését nem a témaváltozók adják. A mező burkolója a .gfield és a .gfield--type-captcha osztályt kapja.

/* címke és leírás */
.gform-theme--framework .gfield--type-captcha {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* tároló belső térköze és kerete */
.gform-theme--framework .gfield--type-captcha {
  padding: 8px 0;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

/* a reCAPTCHA iframe mérete */
.gform-theme--framework .gfield--type-captcha iframe {
  block-size: 90px;
  min-inline-size: 304px;
}

A láthatatlan reCAPTCHA nem jelenít meg látható mezőt, a jelvény máshol jelenik meg, a mező beállításai szerint. Rá csak a címke- és leíráspecifikus stílus vonatkozik.

Egy űrlap, egy mező

Minden fenti mezőtípust egy adott űrlapra vagy mezőre szűkíthetsz, ha a .gform-theme--framework#gform_wrapper_112 választót (egy űrlap) vagy a #field_112_4 azonosítót (egy mező) használod, ahogy az egyes szakaszok mintái mutatják.