Mezők CSS-választói a 2.5-ös témában

Ez a fejezet a régebbi, 2.5-ös témájú űrlapok mezőinek választóit gyűjti össze. Az újabb, Orbital témájú űrlapokra nem érvényesek. Az űrlap egészének elemeit (burkoló, fejléc, élőláb, hibák, többoldalas űrlap) a 2.5-ös téma CSS-választói fejezet, az árazási, bejegyzés- és captcha-mezőket a következő fejezet tartalmazza.

A legtöbb elem háromféleképpen célozható:

Hatókör	Mire hat	Mit kell cserélned
body .gform_wrapper …	minden űrlap	semmit
body #gform_wrapper_1 …	csak az 1-es azonosítójú űrlap	az 1 helyére a saját űrlapod azonosítóját írd
body … #field_XX_X.gfield …	csak egy adott mező	az XX_X helyére a mező azonosítóját írd, például field_1_3

Az alábbi példák a rövidség kedvéért a „minden űrlap” alakot mutatják. A másik két alakhoz cseréld a .gform_wrapper részt #gform_wrapper_1-re, vagy a .gfield részt #field_XX_X.gfield-re. A példák feltűnő (piros) szabályt használnak, hogy lásd, melyik elemet találtad el.

Egysoros szöveg mező

Három elem célozható: a burkoló (div), a beviteli mező (input) és a maximális karakterszám számlálója.

/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_text { border: 1px solid red }
/* beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_text input[type=text] { border: 1px solid red }
/* karakterszámláló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_text .charleft { border: 1px solid red }
/* csak az 1-es űrlap beviteli mezője */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_text input[type=text] { border: 1px solid red }
/* csak egy adott mező beviteli mezője */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_text input[type=text] { border: 1px solid red }

Szám mező

A burkoló (div), a beviteli mező (input) és az elfogadott tartományt leíró útmutató (div.instruction) célozható.

/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_number { border: 1px solid red }
/* beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_number input { color: red }
/* az elfogadott tartomány útmutatója */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_number div.instruction { color: red }
/* csak az 1-es űrlap, vagy csak egy adott mező: a már ismert módon */
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_number input { color: red }

Legördülő mező

A burkoló a .ginput_container_select. Ha a mezőn be van kapcsolva a Továbbfejlesztett felület beállítás, a .ginput_container_select helyett a .chosen-container osztályt kell célozni.

/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_select { border: 1px solid red }
/* csak az 1-es űrlapon */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_select { border: 1px solid red }
/* egy adott mezőn */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_select { border: 1px solid red }

A lista (select) és az elemei (option) a böngésző saját elemei, nem a bővítmény rajzolja őket. Ezért böngészőnként, eszközönként és rendszerenként kissé eltérhet a kinézetük, és csak CSS-sel nem szabhatók testre olyan szabadon, mint az űrlap többi eleme.

/* a lista */
body .gform_wrapper .gform_body .gform_fields .gfield select { border: 1px solid red }
/* egy elem a listában */
body .gform_wrapper .gform_body .gform_fields .gfield select option { color: red }
/* csak az 1-es űrlapon */
body #gform_wrapper_1 .gform_body .gform_fields .gfield select option { color: red }
/* egy adott mezőn */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield select option { color: red }

Rádiógombok és Jelölőnégyzetek mező

A két mező felépítése azonos: a lehetőségeket egy rendezetlen lista (ul) fogja össze, minden lehetőség egy listaelem (li), benne a felirat (label) és a bemenet (input). A rádiógomboknál a lista osztálya .gfield_radio, a jelölőnégyzeteknél .gfield_checkbox.

Elem	Rádiógombok	Jelölőnégyzetek
Lista	.gfield .gfield_radio	.gfield .gfield_checkbox
Lehetőség	.gfield .gfield_radio li	.gfield .gfield_checkbox li
Felirat	.gfield .gfield_radio li label	.gfield .gfield_checkbox li label
Bemenet	.gfield .gfield_radio li input[type=radio]	.gfield .gfield_checkbox li input[type=checkbox]

A táblázat kijelölői a body .gform_wrapper .gform_body .gform_fields után folytatódnak. Egy adott űrlapra szűkítéshez a .gform_wrapper helyett #gform_wrapper_1-et, egy adott mezőre a .gfield helyett #field_XX_X.gfield-et írj:

/* minden űrlap: a rádiógombok listája */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_radio { border: 1px solid red }
/* csak az 1-es űrlap: a jelölőnégyzetek lehetőségei */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_checkbox li { border: 1px solid red }
/* egy adott mező: a rádiógombok feliratai */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .gfield_radio li label { border: 1px solid red }

A rádiógomb és a jelölőnégyzet is böngészőelem, ezért a kinézetük böngészőnként, eszközönként és rendszerenként eltérhet, és csak CSS-sel nem mindig szabhatók teljesen testre.

Küldés gomb

Az alap kijelölő a küldés gombra:

/* minden űrlap */
body .gform_wrapper .gform_footer input[type=submit] { border: 1px solid red }
/* csak az 1-es űrlap */
body #gform_wrapper_1 .gform_footer input[type=submit] { border: 1px solid red }

Ha az űrlap képet használ gombnak, az input[type=image] kijelölőt használd ugyanígy.

Stílusminták

Alapstílus (szín, kitöltés, szegély, lekerekítés, árnyék, háttér):

body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type="submit"] {
    color: #ffffff;
    padding: 4px 10px;
    border: 1px solid rgba(114, 114, 114, 0.4);
    border-radius: 3px;
    box-shadow: 0 1px 0px rgba(114, 114, 114, 0.3);
    background-color: #0096d6;
}

Rámutatáskor (hover) más szegély és háttér:

body .gform_wrapper .gform_footer input[type="submit"]:hover {
    border: 1px solid rgba(114, 114, 114, 0.6);
    background-color: #444444;
}

Lenyomott állapotban a gomb egy pixelt lejjebb csúszik:

body .gform_wrapper .gform_footer input[type="submit"]:active {
    top: 1px;
}

A gomb elrejtése

A megszokott display: none nem jó erre: ilyenkor az űrlap beküldéskezelője megszakítja a küldést. Ehelyett vidd ki a gombot a képernyőről:

body #gform_wrapper_1 .gform_footer input[type="submit"] {
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

Többválasztós mező

Három elem célozható: a burkoló (div), a lista (select) és a lista elemei (option).

/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect { border: 1px solid red }
/* a lista */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect select { border: 1px solid red }
/* egy elem a listában */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_multiselect select option { border: 1px solid red }

Ha a mezőn be van kapcsolva a Továbbfejlesztett felület (Enhanced UI) beállítás, a select helyett a chosen-container osztályt kell célozni.

Hozzájárulás mező

Elem	Választó
Burkoló	body .gform_body .gform_fields .ginput_container.ginput_container_consent
A jelölőnégyzet felirata	body .gform_wrapper .gform_body .gform_fields .gfield .gfield_consent_label
A jelölőnégyzet (input)	body .gform_wrapper .gform_body .gform_fields .ginput_container_consent input[type=checkbox]
A leírás (div)	body .gform_wrapper .gform_body .gform_fields .gfield .gfield_consent_description

Egy adott űrlapra szűkítéshez a .gform_wrapper helyett itt is #gform_wrapper_1-et írj (a burkolónál az űrlap-azonosítós alakot a .gform_body elé tedd).

Dátum mező

A dátum mező két beviteli módban jelenik meg, ezért két csoport választó van.

Dátumválasztó

/* a beviteli mező (input) */
body .gform_wrapper .gform_body .gform_fields .gfield .datepicker { border: 1px solid red }
/* a naptár ikonja (img) */
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_input_datepicker_icon { border: 1px solid red }

Dátummező (hónap, nap, év külön)

Mindhárom részhez három elem tartozik: a burkoló (div, a beviteli mezőt és az alfeliratot tartalmazza), a beviteli mező és az alcímke.

Rész	Burkoló	Beviteli mező	Alcímke
Hónap	.gfield .gfield_date_month	.gfield .gfield_date_month input	.gfield .gfield_date_month label
Nap	.gfield .gfield_date_day	.gfield .gfield_date_day input	.gfield .gfield_date_day label
Év	.gfield .gfield_date_year	.gfield .gfield_date_year input	.gfield .gfield_date_year label

A táblázat kijelölői a body .gform_wrapper .gform_body .gform_fields után folytatódnak, például:

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month input { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label { color: red }

Idő mező

Rész	Burkoló (div)	Beviteli mező (input)	Alcímke (label)
Óra	.gfield .gfield_time_hour	.gfield .gfield_time_hour input	.gfield .gfield_time_hour label
Perc	.gfield .gfield_time_minute	.gfield .gfield_time_minute input	.gfield .gfield_time_minute label

A de./du. (AM/PM) választónak burkolója és legördülő listája van:

Elem	Választó
Burkoló (div)	.gfield .gfield_time_ampm
Választó (select)	.gfield .gfield_time_ampm select

Itt is a body .gform_wrapper .gform_body .gform_fields után folytatódnak a kijelölők:

body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour input { border: 1px solid red }
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_ampm select { border: 1px solid red }

Lista mező

A lista mező kijelölői nem igénylik a body .gform_body .gform_fields előtagot. Mindegyik háromféle hatókörben használható (minden űrlap: .gform_wrapper, egy űrlap: #gform_wrapper_1, egy mező: #field_XX_X.gfield).

Elem	Választó (minden űrlap)
Burkoló	.gform_wrapper .ginput_container_list
Fejlécek (oszlopcímkék)	.gform_wrapper .gfield_list_header.gform-grid-row
Egy oszlop	.gform_wrapper .gfield_list_X_cellY (az X a mező azonosítója, az Y az oszlop sorszáma)
Páratlan sorok	.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_odd
Páros sorok	.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_even
Minden sor	.gform_wrapper .gfield_list_group.gform-grid-row
Cellák	.gform_wrapper .gfield_list_group_item.gfield_list_cell
A sor hozzáadó és törlő ikonjainak sora	.gform_wrapper .gfield_list_icons.gform-grid-col
Sor hozzáadása ikon	.gfield_list_icons .add_list_item
Sor törlése ikon	.gfield_list_icons .remove_list_item

Néhány példa:

/* az 1-es űrlap 1-es mezőjének első oszlopa */
#gform_wrapper_1 .gfield_list_1_cell1 { border: 2px solid #333333; }

/* váltakozó színű sorok */
.gform_wrapper .gfield_list_group.gform-grid-row.gfield_list_row_odd { background: #eeeeee; }

/* a sorok hozzáadását és törlését végző ikonok elrejtése az 1-es űrlapon */
#gform_wrapper_1 .gfield_list_icons .add_list_item { display: none; }
#gform_wrapper_1 .gfield_list_icons .remove_list_item { display: none; }

Név mező

A név mező keresztnév és vezetéknév részének ugyanaz a három eleme van: burkoló (span), beviteli mező (input) és alcímke (label).

Rész	Burkoló	Beviteli mező	Alcímke
Keresztnév	.gfield .name_first	.gfield .name_first input	.gfield .name_first label
Vezetéknév	.gfield .name_last	.gfield .name_last input	.gfield .name_last label

A kijelölők a body .gform_wrapper .gform_body .gform_fields után folytatódnak:

body .gform_wrapper .gform_body .gform_fields .gfield .name_first input { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .name_last label { color: red; }

Cím mező

A cím mező minden része (burkoló, beviteli mező, alcímke) külön célozható.

Rész	Burkoló (div)	Beviteli mező	Alcímke (label)
Cím, 1. sor	.gfield .address_line_1	.gfield .address_line_1 input	.gfield .address_line_1 label
Cím, 2. sor	.gfield .address_line_2	.gfield .address_line_2 input	.gfield .address_line_2 label
Város	.gfield .address_city	.gfield .address_city input	.gfield .address_city label
Állam, megye	.gfield .address_state	.gfield .address_state input	.gfield .address_state label
Irányítószám	.gfield .address_zip	.gfield .address_zip input	.gfield .address_zip label
Ország	.gfield .address_country	.gfield .address_country select	.gfield .address_country label

Az ország beviteli eleme legördülő lista (select), nem szövegmező. A kijelölők itt is a body .gform_wrapper .gform_body .gform_fields után folytatódnak:

body .gform_wrapper .gform_body .gform_fields .gfield .address_city input { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .address_country select { border: 1px solid red; }

E-mail és weboldal mező

Mindkét mezőnek két eleme van: a burkoló (div) és a beviteli mező (input).

/* e-mail mező: burkoló, majd a beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_email { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_email input { border: 1px solid red; }

/* weboldal mező: burkoló, majd a beviteli mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_website { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_website input { border: 1px solid red; }

Fájlfeltöltés mező

Az egyfájlos feltöltésnek két eleme van: a burkoló és a fájlválasztó beviteli mező.

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload { border: 1px solid red; }
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload input { color: red; }

A többfájlos feltöltésnél a burkolón kívül további elemek is célozhatók:

Elem	Választó (a .gfield után)
A feltöltési útmutató szövege (span)	.ginput_container_fileupload .gform_drop_instructions
Hibaüzenet (div)	.ginput_container_fileupload .validation_message
Fájlkiválasztó gomb (input)	.ginput_container_fileupload .gform_button_select_files

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files { color: red; }

HTML mező

A HTML mező egyetlen listaelem (li):

/* minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield_html { border: 1px solid red }
/* csak az 1-es űrlap */
body #gform_wrapper_1 .gform_body .gform_fields .gfield_html { border: 1px solid red }
/* csak egy adott HTML mező */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield_html { border: 1px solid red }

Figyeld meg, hogy az adott mezőre szűkítésnél itt a #field_XX_X.gfield_html alak kell, nem a .gfield.

Bekezdés szövege mező

Három elem célozható: a burkoló (div), a beviteli mező (textarea) és a maximális karakterszám számlálója.

/* burkoló, minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_textarea { border: 1px solid red }
/* beviteli mező, minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_textarea textarea { color: red }
/* karakterszámláló, minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_textarea .charleft { color: red }
/* csak az 1-es űrlap beviteli mezője */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_textarea textarea { color: red }
/* csak egy adott mező beviteli mezője */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gfield .ginput_container_textarea textarea { color: red }

A burkolóra és a karakterszámlálóra az 1-es űrlapra és az adott mezőre szűkítés ugyanígy működik: a .gform_wrapper helyére #gform_wrapper_1, a .gfield helyére #field_XX_X.gfield kerül.

Szakasz mező

A Szakasz mező három eleme célozható: a burkoló (li, .gsection osztállyal), a cím (h2, .gsection_title) és a leírás (div, .gsection_description).

/* burkoló */
body .gform_wrapper .gform_body .gform_fields .gsection { border: 1px solid red }
/* cím */
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_title { color: red }
/* leírás */
body .gform_wrapper .gform_body .gform_fields .gsection .gsection_description { border: 1px solid red }
/* csak az 1-es űrlap címe */
body #gform_wrapper_1 .gform_body .gform_fields .gsection .gsection_title { color: red }
/* csak egy adott Szakasz mező címe */
body .gform_wrapper .gform_body .gform_fields #field_XX_X.gsection .gsection_title { color: red }

A burkolóra és a leírásra a szűkítés ugyanígy megy. Az adott mezőre szűkítésnél itt is a #field_XX_X.gsection alak kell, nem a .gfield.