CSS-választók az Orbital téma Egysoros szöveg és Legördülő lista mezőihez

Ez a fejezet az Orbital témájú űrlapok Egysoros szöveg és Legördülő lista 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).

Egysoros szöveg mező

Az Egysoros szöveg mező egyetlen beviteli elemet jelenít meg rövid szöveghez. A mező burkolója a .gfield--type-text és a .gfield--input-type-text osztályt kapja. Ha a Jelszóbevitel bekapcsolása be van kapcsolva, a burkoló osztálya nem változik, csak a beviteli elem type attribútuma lesz password. Ha meg van adva a Maximális karakterszám, a beviteli elem alatt karakterszámláló jelenik meg.

A mező mérete (kicsi, közepes, nagy) egy small, medium vagy large osztályt ad a beviteli elemre, ami a magasságát szabja meg:

Méret	Változó	Érték
kicsi	--gf-ctrl-size-sm	35 px
közepes	--gf-ctrl-size-md	38 px
nagy	--gf-ctrl-size-lg	47 px

Tároló

/* minden Orbital űrlap */
.gform-theme--framework .gfield--type-text {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield--type-text {
  --gf-ctrl-bg-color: #f9f9f9;
  --gf-ctrl-border-color: #e5e7eb;
}

/* a 112-es űrlap 4-es mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
  --gf-ctrl-radius: 6px;
}

A beviteli elem

A beviteli elem a keretrendszer általános vezérlőváltozóit örökli, ezeket a mező vagy az űrlap hatókörében állítsd. Jelszó módban is ugyanaz a stílus érvényes. Ha csak a jelszómezőket akarod megcélozni, használd az input[type="password"] választót: a burkoló osztálya mindkét módban .gfield--input-type-text, külön .gfield--input-type-password osztály nincs.

.gform-theme--framework .gfield--type-text {
  --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;
}

/* nagy méretű mezők magasabbra */
.gform-theme--framework .gfield--type-text input.large {
  --gf-ctrl-size: 50px;
}

/* helyőrző: ha a változó nem hat, közvetlenül a ::placeholder elemet állítsd */
.gform-theme--framework .gfield--type-text input::placeholder {
  color: rgba(17, 35, 55, 0.5);
  font-size: 16px;
}

/* szélesség: nincs rá változó, közvetlen tulajdonság kell */
.gform-theme--framework .gfield--type-text input {
  max-width: 300px;
}

Karakterszámláló

Ha be van állítva a Maximális karakterszám, a beviteli elem alatt megjelenik például a „0 / 500 karakter” jellegű számláló. Az osztályai: .charleft és .ginput_counter, és örökli a .gfield_description osztályt is. A korlát közelében megkapja a .warningTextareaInfo, a túllépésnél az .errorTextareaInfo osztályt.

.gform-theme--framework .gfield--type-text .charleft,
.gform-theme--framework .gfield--type-text .ginput_counter {
  --gf-ctrl-desc-color: #6b7280;
  --gf-ctrl-desc-font-size: 14px;
  margin-top: 8px;
}

/* a korlát közelében */
.gform-theme--framework .gfield--type-text .charleft.warningTextareaInfo {
  --gf-ctrl-desc-color: #112337;
}

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

A címke osztályai: gfield_label és gform-field-label. Kötelező mezőnél beágyazott gfield_required és gfield_required_text elem jelzi a „(Kötelező)” szöveget. A leírás a leírás helyének beállításától függően a beviteli elem fölött vagy alatt jelenik meg.

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

/* a kötelező jelölés */
.gform-theme--framework .gfield--type-text.gfield_contains_required {
  --gf-ctrl-label-color-req: #c02b0a;
  --gf-ctrl-label-font-size-req: 12px;
}

Használati példák

Kiemelt keret:

.gform-theme--framework .gfield--type-text {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

Egy adott mező (a 112-es űrlap 4-es mezője):

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

Csak a jelszómezők:

.gform-theme--framework .gfield--type-text input[type="password"] {
  --gf-ctrl-bg-color: #f8f9fa;
  --gf-ctrl-placeholder-color: rgba(17, 35, 55, 0.45);
}

.gform-theme--framework .gfield--type-text input[type="password"]::placeholder {
  color: rgba(17, 35, 55, 0.45);
}

Legördülő lista mező

A Legördülő lista natív HTML select elemet jelenít meg. Ha be van kapcsolva a Továbbfejlesztett felhasználói felület bekapcsolása, a mező a Chosen.js-t használja, és a natív elem helyett egy .chosen-container-single elem látszik. A natív select és az option elemeket a böngésző rajzolja, 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.

Tároló

A mező burkolója a .gfield és a .gfield--type-select (a select bemenetet használó mezőknél a .gfield--input-type-select) osztályt kapja. Továbbfejlesztett felületnél a látható vezérlő a .chosen-container-single; a natív select ilyenkor is a dokumentumban marad a beküldéshez, de nem látszik.

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

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

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

A natív lista

A natív select megkapja a keretrendszer vezérlőstílusát (háttér, keret, lekerekítés, betű), és a legördülő nyíl saját változóit.

.gform-theme--framework .gfield--type-select {
  --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-select-icon-size: 12px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
  --gf-ctrl-select-padding-x: 12px 32px;
}

/* szélesség: közvetlen tulajdonság */
.gform-theme--framework .gfield--type-select select {
  max-width: 300px;
}

A lehetőségek

A kiválasztott érték színét (a zárt listában látszó szöveget) a select elemen állíthatod. A nyitott lista option elemein a color és a betűtulajdonságok csak egyes böngészőkben hatnak, ezért ez megbízhatatlan.

.gform-theme--framework .gfield--type-select select {
  color: #1a365d;
}

Továbbfejlesztett felület (Chosen)

Bekapcsolt továbbfejlesztett felületnél a látható vezérlő a .chosen-container-single (benne a kattintható .chosen-single), a nyitott lista a .chosen-drop, a lehetőségek a .chosen-results alatti li elemek. Erre a felületre ezeket a választókat használd, a natív select és a .ginput_container_select nem a látható elem.

A vezérlő:

.gform-theme--framework .gfield--type-select {
  --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-select-icon-size: 10px;
}

.gform-theme--framework#gform_wrapper_112 .gfield--type-select {
  --gf-ctrl-radius: 6px;
  --gf-ctrl-select-search-icon-size: 16px;
}

A nyitott lista a --gf-ctrl-select-dropdown-* változókkal szabható:

.gform-theme--framework .gfield--type-select {
  --gf-ctrl-select-dropdown-radius: 6px;
  --gf-ctrl-select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

A lehetőségek egérrel való érintésekor és a kijelölt állapotban a --gf-ctrl-select-dropdown-option-bg-color-hover és a --gf-ctrl-select-dropdown-option-shadow-hover változó hat:

.gform-theme--framework .gfield--type-select {
  --gf-ctrl-select-dropdown-option-bg-color-hover: #eef2ff;
  --gf-ctrl-select-dropdown-option-shadow-hover: inset 3px 0 0 #204ce5;
}

A keresőmező, ha sok lehetőség miatt megjelenik, a --gf-ctrl-select-search-* változókkal állítható a mező hatókörében:

.gform-theme--framework .gfield--type-select {
  --gf-ctrl-select-search-icon-size: 16px;
  --gf-ctrl-select-search-padding-x: 12px 16px;
}

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

A fő címkét a .gform-field-label adja; a színét és méretét a --gf-ctrl-label-color-primary és a --gf-ctrl-label-font-size-primary változó a .gfield--type-select hatókörben. A leírás a leírás helyétől függően a lista fölött vagy alatt látszik (--gf-ctrl-desc-color, --gf-ctrl-desc-font-size).

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

Használati példák

Kiemelt keret:

.gform-theme--framework .gfield--type-select {
  --gf-ctrl-border-color: #204ce5;
  --gf-ctrl-border-color-hover: #044ad3;
  --gf-ctrl-radius: 6px;
}

Egy adott 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;
}

Továbbfejlesztett lista saját árnyékkal:

.gform-theme--framework .gfield--type-select {
  --gf-ctrl-select-dropdown-shadow: 0 8px 24px rgba(18, 25, 97, 0.12);
  --gf-ctrl-select-dropdown-radius: 8px;
}