A Név, Cím, Fájlfeltöltés és Többes választás mező CSS-e az Orbital témában

Ezek a választók csak az Orbital témájú űrlapokra érvényesek. A 2.5-ös témához a régi témás mezőválasztók fejezet tartozik. A CSS API-változók áttekintése a CSS-útmutató fejezetben van. Az egyszerűbb mezők (E-mail, Weboldal, Szám, HTML és a bejegyzésmezők) választói a szöveges és bejegyzésmezők CSS-e fejezetben vannak.

A példákban a 112 az űrlap azonosítója, a 4 a mező azonosítója: ezeket cseréld a sajátodra. Minden mező azonosítója field_{űrlapazonosító}_{mezőazonosító} alakú, például field_5_3.

Név mezők

A Név mező almezői a .ginput_container--name tárolóban vannak:

Almező	Osztály
Keresztnév	.name_first
Vezetéknév	.name_last
Előtag	.name_prefix
Középső név	.name_middle
Utótag	.name_suffix

Az almezők címkéi a .gform-field-label--type-sub osztályt kapják. Az elrendezés az űrlap rácsrendszerére épül (.gform-grid-row, .gform-grid-col). Az Előtag és az Utótag szövegbevitel vagy legördülő lista is lehet, ha vannak megadva választási lehetőségek (ilyenkor .name_prefix_select, .name_suffix_select osztályt is kapnak). Orbital jelölésnél a mező fieldset burkolót kap.

A fő mező osztálya .gfield--type-name, a belső tároló .ginput_container--name (egyes helyzetekben .ginput_container.ginput_container_name).

/* fő mező: minden Orbital űrlap */
.gform-theme--framework .gfield--type-name {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name {
  --gf-ctrl-label-color-primary: #112337;
  --gf-ctrl-desc-font-size: 14px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

Keresztnév és vezetéknév

A bevitel stílusát és az almezőcímkét az almező tárolóján (.name_first, .name_last) állítod. Az almezőcímkék a harmadlagos címkeváltozókat olvassák: --gf-ctrl-label-color-tertiary és --gf-ctrl-label-font-size-tertiary. Teljes irányításhoz van még --gf-ctrl-label-font-family-tertiary, --gf-ctrl-label-font-weight-tertiary, --gf-ctrl-label-font-style-tertiary, --gf-ctrl-label-letter-spacing-tertiary és --gf-ctrl-label-line-height-tertiary.

/* keresztnév: bevitel és almezőcímke */
.gform-theme--framework .gfield--type-name .name_first {
  --gf-ctrl-radius: 6px;
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 16px;
}

/* vezetéknév: ugyanígy */
.gform-theme--framework .gfield--type-name .name_last {
  --gf-ctrl-radius: 6px;
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 16px;
}

/* csak a 112-es űrlap keresztneve */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .name_first {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-label-color-tertiary: #112337;
}

Előtag, középső név, utótag

Az Előtag, a Középső név és az Utótag almező csak akkor látszik, ha a mező beállításaiban be van kapcsolva.

.gform-theme--framework .gfield--type-name .name_prefix,
.gform-theme--framework .gfield--type-name .name_middle,
.gform-theme--framework .gfield--type-name .name_suffix {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 16px;
}

Elrendezés és térköz

Az almezők közti vízszintes és függőleges távolságot a --gf-field-gap-x és a --gf-field-gap-y szabja meg.

.gform-theme--framework .gfield--type-name .ginput_container--name {
  --gf-field-gap-x: 32px;
  --gf-field-gap-y: 20px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-name .ginput_container--name {
  --gf-field-gap-x: 32px;
}

Leírás és példák

/* leírás */
.gform-theme--framework .gfield--type-name {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret minden beviteli mezőn */
.gform-theme--framework .gfield--type-name {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

/* csak a keresztnév és a vezetéknév */
.gform-theme--framework .gfield--type-name .name_first,
.gform-theme--framework .gfield--type-name .name_last {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-border-color: #cbd5e1;
}

/* egyetlen mező azonosító szerint */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 16px;
  --gf-ctrl-desc-color: #64748b;
}

Cím mező

A Cím mező több almezőből áll: utcai cím (Address Line 1), második címsor, város, megye/állam, irányítószám és ország. Az almezők osztályai:

Almező	Osztály
Utcai cím	.address_line_1
Második címsor	.address_line_2
Város	.address_city
Megye / állam	.address_state
Irányítószám	.address_zip
Ország	.address_country

Megjelenhetnek előtaggal is, például .ginput_address_line_1, .ginput_address_city, .ginput_address_state. Az utcától az irányítószámig a mezők beviteli elemek. A megye/állam a címformátumtól függően beviteli mező (nemzetközi) vagy legördülő lista (amerikai, kanadai). Az ország mindig legördülő lista. Az elrendezés az űrlap rácsrendszerét követi, és az almezők a mező beállításaiban külön-külön megjeleníthetők vagy elrejthetők.

A fő mező fieldset burkolót kap .gfield--type-address osztállyal, benne a .ginput_container_address tárolóval.

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

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

Az almezők stílusa

Minden almező ugyanazzal a mintával állítható: az almező osztálya után a bevitel változói, és a .gform-field-label--type-sub osztályon az almezőcímke változói (pl. „Street Address”). Az összes almezőcímkét egyszerre a .gfield--type-address .gform-field-label--type-sub választóval éred el.

/* utcai cím */
.gform-theme--framework .gfield--type-address .address_line_1 {
  --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-address .address_line_1 .gform-field-label--type-sub {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 16px;
}

/* második címsor, város, megye/állam, irányítószám, ország */
.gform-theme--framework .gfield--type-address .address_line_2,
.gform-theme--framework .gfield--type-address .address_city,
.gform-theme--framework .gfield--type-address .address_state,
.gform-theme--framework .gfield--type-address .address_zip,
.gform-theme--framework .gfield--type-address .address_country {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-font-size: 16px;
}

/* az összes almezőcímke */
.gform-theme--framework .gfield--type-address .gform-field-label--type-sub {
  --gf-ctrl-label-color-tertiary: #1a365d;
  --gf-ctrl-label-font-size-tertiary: 16px;
}

/* csak a 112-es űrlap városa */
.gform-theme--framework#gform_wrapper_112 .gfield--type-address .address_city {
  --gf-ctrl-font-size: 16px;
}

Értékek másolása

Ha az értékmásolási lehetőség be van kapcsolva, egy jelölőnégyzet jelenik meg a címmezők fölött, amellyel egy másik címmező értékeit másolhatod át. A tárolója a .copy_values_option_container, a felirata a .gform-field-label--type-inline osztályt kapja.

.gform-theme--framework .gfield--type-address .copy_values_option_container {
  --gf-ctrl-label-color-secondary: #1a365d;
  --gf-ctrl-label-font-size-secondary: 14px;
}

Leírás, hibaüzenet, példák

A leírás a form leírás-elhelyezése szerint a mező fölött vagy alatt jelenik meg. A hibaüzenet kötelező vagy érvénytelen címadatnál látszik, osztályai: .gfield_description, .validation_message, .gfield_validation_message.

.gform-theme--framework .gfield--type-address .gfield_validation_message {
  --gf-ctrl-desc-color-error: #c02b0a;
  --gf-ctrl-desc-font-size-error: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-address {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

/* csak az utcai cím két sora */
.gform-theme--framework .gfield--type-address .address_line_1,
.gform-theme--framework .gfield--type-address .address_line_2 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-border-color: #cbd5e1;
}

/* egyetlen mező azonosító szerint */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-label-color-secondary: #334155;
  --gf-ctrl-desc-color: #64748b;
}

Fájlfeltöltés mező

A Fájlfeltöltés mező egy vagy több fájl feltöltésére való. A beállítástól függően kétféle: az egyfájlos feltöltés a böngésző natív input[type="file"] elemét mutatja, a többfájlos feltöltés (Több fájl feltöltésének bekapcsolása) húzható feltöltési területet (.gform_drop_area) kínál utasítással és Fájlok kiválasztása gombbal. A natív fájlbevitelt a böngésző rajzolja, ezért kinézete böngészőtől, eszköztől és operációs rendszertől függ. A húzós terület és az előnézeti lista az Orbital keretrendszer és a CSS API-változók szerint stílusozható.

Osztályai: .gfield, .gfield--type-fileupload, .gfield--input-type-fileupload (például a Bejegyzés képe mezőnél is), .ginput_container_fileupload.

.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

Egyfájlos feltöltés

A natív fájlbevitelt a --gf-ctrl-file-* változók stílusozzák. A böngésző „Choose File” / „Browse” gombja a ::file-selector-button pszeudoelem, kinézetét a --gf-ctrl-file-btn-* változók adják. A teljes testreszabás böngészőfüggően korlátozott lehet.

.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-file-btn-bg-color: #374151;
  --gf-ctrl-file-btn-bg-color-hover: #4b5563;
  --gf-ctrl-file-btn-border-inline-end-color: #d2d5db;
  --gf-ctrl-file-btn-color: rgba(255, 255, 255, 0.725);
  --gf-ctrl-file-btn-font-size: 14px;
}

.gform-theme--framework .gfield--type-fileupload input[type="file"] {
  max-width: 300px;
}

/* egyedi gomb */
.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-file-btn-bg-color: #204ce5;
  --gf-ctrl-file-btn-bg-color-hover: #044ad3;
  --gf-ctrl-file-btn-color: #ffffff;
  --gf-ctrl-file-btn-radius: 6px;
}

Többfájlos feltöltés

A húzós terület. A terület feltöltési ikont, utasítószöveget és fájlválasztó gombot tartalmaz. A --gf-ctrl-file-zone-* változókkal stílusozod.

.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-file-zone-height: auto;
  --gf-ctrl-file-zone-radius: 8px;
  --gf-ctrl-file-zone-border-style: dashed;
  --gf-ctrl-file-zone-color: rgba(107, 114, 128, 0.725);
  --gf-ctrl-file-zone-padding-y: 40px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload {
  --gf-ctrl-file-zone-icon-color: #204ce5;
  --gf-ctrl-file-zone-icon-font-size: 36px;
}

Az utasítószöveg. A „Húzd ide a fájlokat, vagy” szöveg a területen belül van, és örökli annak stílusát: színét a --gf-ctrl-file-zone-color, tipográfiáját a --gf-ctrl-file-zone-font-weight, a --gf-ctrl-file-zone-line-height és a mező --gf-ctrl-font-size változója adja. A gombtól való távolságot a --gf-ctrl-file-zone-instructions-margin-y-end szabja. A változókat a .gfield--type-fileupload (vagy a .gform_drop_area) elemen állítsd, a .gform_drop_instructions célzására nincs szükség.

.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

A fájlválasztó gomb. A Fájlok kiválasztása gomb osztályai: .gform_button_select_files, .gform-theme-button, .gform-theme-button--control. A szokásos gombváltozókat használja: --gf-ctrl-btn-bg-color-ctrl, --gf-ctrl-btn-bg-color-hover-ctrl, --gf-ctrl-btn-color-ctrl.

.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-btn-bg-color-ctrl: #374151;
  --gf-ctrl-btn-bg-color-hover-ctrl: #4b5563;
  --gf-ctrl-btn-color-ctrl: #ffffff;
}

A feltöltési szabályok. Ha megadtad az engedélyezett kiterjesztéseket, a legnagyobb fájlméretet vagy a legtöbb fájlt, a szabályok a .gform_fileupload_rules elemben jelennek meg (gfield_description osztállyal). Stílusuk a --gf-ctrl-desc-color és a --gf-ctrl-desc-font-size változóval állítható.

.gform-theme--framework .gfield--type-fileupload .gform_fileupload_rules {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 13px;
  margin-top: 8px;
}

Hibaüzenet. A hibaüzenet a .validation_message és a .gfield_validation_message elemben jelenik meg.

.gform-theme--framework .gfield--type-fileupload .validation_message {
  --gf-ctrl-desc-color-error: #c02b0a;
  --gf-ctrl-desc-font-size-error: 14px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-fileupload .validation_message {
  --gf-ctrl-desc-color-error: #b91c1c;
}

Az előnézeti lista. A kiválasztott fájlok előnézeti listában jelennek meg: a tároló a .ginput_preview_list, az egyes elemek .ginput_preview. A stílust a --gf-ctrl-file-prev-* változók adják, a folyamatjelzőt a --gf-ctrl-file-prog-* változók.

.gform-theme--framework .gfield--type-fileupload .ginput_preview_list {
  --gf-ctrl-file-prev-area-gap: 16px;
  --gf-ctrl-file-prev-area-margin-y-start: 16px;
}

.gform-theme--framework .gfield--type-fileupload .gfield_fileupload_filename {
  --gf-ctrl-file-prev-name-color: #1a365d;
  --gf-ctrl-file-prev-name-line-height: 1.5;
}

.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-file-prog-bar-bg-color: #e5e7eb;
  --gf-ctrl-file-prog-bar-bg-color-loading: #204ce5;
  --gf-ctrl-file-prog-text-color: #6b7280;
}

Címke, leírás, példák

/* címke */
.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás: a form leírás-elhelyezése szerint a mező fölött vagy alatt */
.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* kiemelő színű húzós terület */
.gform-theme--framework .gfield--type-fileupload .gform_drop_area {
  border-color: #204ce5;
}

.gform-theme--framework .gfield--type-fileupload {
  --gf-ctrl-file-zone-color: #204ce5;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-file-zone-icon-color: #0f172a;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

Többes választás mező

A Többes választás mező natív select[multiple] elemet jelenít meg. Ha be van kapcsolva a Továbbfejlesztett felület bekapcsolása, a mező a Chosen.js-t használja: a natív elem a DOM-ban marad, de láthatatlan, helyette a .chosen-container-multi, .chosen-choices, .chosen-drop és .chosen-results elemek jelennek meg. A natív select és option elemeket a böngésző vezérli, ezért CSS-sel nem mindig szabhatók teljesen testre.

Osztályai: .gfield és .gfield--type-multiselect.

Natív lista

A natív lista változói: --gf-ctrl-multiselect-height, --gf-ctrl-multiselect-radius, --gf-ctrl-multiselect-line-height, --gf-ctrl-multiselect-padding-y.

.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-hover: #b8bcc4;
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-multiselect-height: 150px;
  --gf-ctrl-multiselect-radius: 8px;
  --gf-ctrl-multiselect-padding-y: 8px;
}

/* szélesség */
.gform-theme--framework .gfield--type-multiselect {
  max-width: 400px;
}

/* a lista elemei (option) */
.gform-theme--framework .gfield--type-multiselect select option {
  color: #1a365d;
}

/* magasabb natív lista */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-multiselect-height: 200px;
  --gf-ctrl-multiselect-padding-y: 10px;
}

Fejlesztett felület (Chosen)

Fejlesztett felületnél a Chosen elemeit stílusozod a natív lista helyett.

/* tároló */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-bg-color: #ffffff;
  --gf-ctrl-bg-color-hover: #f5f5f5;
  --gf-ctrl-bg-color-focus: #ffffff;
  --gf-ctrl-border-color: #d2d5db;
  --gf-ctrl-border-color-focus: #204ce5;
  --gf-ctrl-multiselect-radius: 8px;
}

/* a kiválasztott elemek (címkék): .chosen-choices li.search-choice */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-multiselect-selected-item-bg-color: #204ce5;
  --gf-ctrl-multiselect-selected-item-color: #ffffff;
  --gf-ctrl-multiselect-selected-item-radius: 20px;
  --gf-ctrl-multiselect-selected-item-font-size: 14px;
  --gf-ctrl-multiselect-selected-item-font-weight: 600;
  --gf-ctrl-multiselect-selected-item-remove-icon-color: #ffffff;
  --gf-ctrl-multiselect-close-icon-size: 12px;
}

/* a lenyíló panel */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-select-dropdown-radius: 6px;
  --gf-ctrl-select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* a lenyíló panel elemei egérrel rámutatva */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-select-dropdown-option-bg-color-hover: #eef2ff;
  --gf-ctrl-select-dropdown-option-shadow-hover: inset 3px 0 0 #204ce5;
}

Csak egy űrlapra ugyanezt a .gform-theme--framework#gform_wrapper_112 .gfield--type-multiselect választóval szűkítheted.

Címke, leírás, példák

/* címke */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-label-color-primary: #1a365d;
  --gf-ctrl-label-font-size-primary: 16px;
}

/* leírás */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
}

/* kiemelő keret */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-multiselect-radius: 6px;
}

/* egyetlen mező */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-bg-color: #f8fafc;
  --gf-ctrl-label-color-primary: #0f172a;
  --gf-ctrl-desc-color: #64748b;
}

/* zöldeskék kiválasztott elemek */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-multiselect-selected-item-bg-color: #0f766e;
  --gf-ctrl-multiselect-selected-item-color: #ffffff;
  --gf-ctrl-multiselect-selected-item-radius: 24px;
}

/* lenyíló panel egyedi árnyékkal */
.gform-theme--framework .gfield--type-multiselect {
  --gf-ctrl-select-dropdown-shadow: 0 8px 24px rgba(18, 25, 97, 0.12);
  --gf-ctrl-select-dropdown-radius: 8px;
}