CSS-választók az árazási, bejegyzés- és captcha-mezőkhöz (2.5-ös téma)

Ez a fejezet a 2.5-ös téma CSS-választói folytatása: az árazási mezők (Mennyiség, Opció, Szállítás, Összesen), a bejegyzésmezők és a captcha mező elemeit sorolja fel. A választók csak a 2.5-ös témájú űrlapokra vonatkoznak.

Minden elemnél három szint használható:

• minden űrlap: a body .gform_wrapper … kezdetű választó,
• egy űrlap: a .gform_wrapper helyett #gform_wrapper_1, ahol az 1 az űrlap azonosítója,
• egyetlen mező: a .gfield (vagy .gfield_price) helyett #field_XX_X.gfield, ahol az XX_X helyére a mező azonosítóját írd (például #field_1_3).

A példák feltűnő (piros) szabályt használnak, hogy lásd, melyik elemet találtad el.

Árazási mezők

Mennyiség mező

A mező burkolója egy div, benne a beviteli elem (input). Az árazási mezők .gfield_price osztályt kapnak.

/* a burkoló (div): minden űrlap, egy űrlap, egy mező */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_number { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_number { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_number { border: 1px solid red; }

/* a beviteli elem (input) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_number input { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_number input { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_number input { border: 1px solid red; }

Opció mező

Az Opció mező egy legördülő lista (select), a választható elemek option elemek.

/* a burkoló (div) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_select { border: 1px solid red; }

/* a legördülő lista (select) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_select select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_select select { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_select select { border: 1px solid red; }

/* a lista elemei (option) */
body .gform_wrapper .gform_body .gform_fields .gfield_price .ginput_container_select select option { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_price .ginput_container_select select option { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_price .ginput_container_select select option { border: 1px solid red; }

Szállítás mező

/* a burkoló (div) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleshipping { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_singleshipping { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_singleshipping { border: 1px solid red; }

/* a címke (label) */
body .gform_wrapper .gform_body .gform_fields .gfield_shipping .gfield_label { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield_shipping .gfield_label { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield_shipping .gfield_label { border: 1px solid red; }

/* a szállítási díj (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_singleshipping .ginput_shipping_price { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_singleshipping .ginput_shipping_price { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_singleshipping .ginput_shipping_price { color: red; }

Összesen mező

/* a burkoló (div) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_total { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_total { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_total { border: 1px solid red; }

/* a végösszeg (span) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_total .ginput_total { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_total .ginput_total { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_total .ginput_total { color: red; }

Bejegyzésmezők

Mind az öt bejegyzésmező ugyanúgy épül fel: egy burkoló div (.ginput_container_<típus>), benne a beviteli elem. A táblázat a burkolók osztályát mutatja.

Mező	Burkoló osztálya
Bejegyzés címe	.ginput_container_post_title
Bejegyzés törzse	.ginput_container_post_content
Bejegyzés kivonata	.ginput_container_post_excerpt
Bejegyzés címkéi	.ginput_container_post_tags
Bejegyzés képe	.ginput_container_post_image

A burkolót és a benne lévő input elemet így célozhatod meg (a post_title helyére a táblázat szerinti osztály kerül):

/* a burkoló (div): minden űrlap, egy űrlap, egy mező */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_post_title { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_post_title { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_post_title { border: 1px solid red; }

/* a beviteli elem (input) */
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_post_title input { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_container_post_title input { color: red; }
body #gform_wrapper_1 .gform_body .gform_fields #field_XX_X.gfield .ginput_container_post_title input { color: red; }

A törzs, a kivonat, a címkék és a kép elemeit ugyanezzel a mintával érheted el, a burkoló osztályát cserélve. Például a bejegyzés képének beviteli elemét minden űrlapon:

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

Captcha mező

A captcha mezőnek két változata van, mindegyiknek más a felépítése.

reCAPTCHA

A reCAPTCHA jelölését külső szolgáltatás szúrja be dinamikusan, ezért csak a burkolóját célozhatod.

/* minden űrlap */
body .gform_wrapper .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area { border: 1px solid red; }
/* az 1-es űrlap */
body #gform_wrapper_1 .gform_body .gform_fields .gfield .recaptcha_widget_div .recaptcha_area { border: 1px solid red; }

Ha a reCAPTCHA burkolóját az újabb jelölés szerint akarod elérni, használd a .ginput_recaptcha osztályt:

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_recaptcha { border: 1px solid red; }
body #gform_wrapper_1 .gform_body .gform_fields .gfield .ginput_recaptcha { border: 1px solid red; }

Really Simple CAPTCHA

Elem	Választó (a body .gform_wrapper .gform_body .gform_fields .gfield után)
A kép és a beviteli elem közös burkolója (div)	.gfield_captcha_container
A captcha képe (img)	.gfield_captcha_container .gfield_captcha
A beviteli mező (input)	.gfield_captcha_container .gfield_captcha_input_container input

Egy adott űrlapra szűkítve a .gform_wrapper helyett #gform_wrapper_1 szerepel, például:

body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_captcha_container .gfield_captcha { border: 1px solid red; }