CAPTCHA Field CSS Selectors

Note: These selectors apply only to forms using the Orbital theme. If you are using the Gravity Forms 2.5 theme, see the Legacy CSS Selectors documentation.

The CAPTCHA field supports reCAPTCHA (Google v2). reCAPTCHA injects third-party markup (iframe) into .ginput_recaptcha.

For full variable definitions, see the CSS API documentation.

Container

The CAPTCHA field uses .gfield, .gfield--type-captcha, and .ginput_recaptcha (reCAPTCHA). Each field includes an ID in the format field_{form_id}_{field_id}. Example: field_5_3.

/* example: CAPTCHA field main container – applies to all Orbital forms */
.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;
}

/* example: CAPTCHA field main container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-captcha {
	--gf-ctrl-label-color-primary: #112337;
}

reCAPTCHA

Container

/* example: reCAPTCHA container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-captcha {
	padding: 8px 0;
}

/* example: reCAPTCHA container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-captcha {
	padding: 12px 0;
}

Captcha Image

/* example: captcha image border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-captcha {
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}

/* example: captcha image – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-captcha {
	border-radius: 6px;
}

Field Label

/* example: CAPTCHA field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-captcha {
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-ctrl-label-font-size-primary: 16px;
}

/* example: CAPTCHA field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-captcha {
	--gf-ctrl-label-color-primary: #112337;
	--gf-ctrl-label-font-size-primary: 18px;
}

Field Description

/* example: CAPTCHA field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-captcha {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
}

Use Case Examples

reCAPTCHA iframe Sizing

/* example: reCAPTCHA iframe dimensions – applies to all Orbital forms */
.gform-theme--framework .gfield--type-captcha iframe {
	block-size: 90px;
	min-inline-size: 304px;
}

/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-captcha iframe {
	block-size: 85px;
}

Invisible reCAPTCHA

Invisible reCAPTCHA does not render a visible field. The badge appears elsewhere, configured in field settings. Only label and description styling apply.

CSS API Reference

For full variable definitions, see the separate CSS API documentation.