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 Credit Card field collects card number, expiration date, security code, and cardholder name. It is a complex multi-input field with a grid layout. Sub-labels (Card Number, Expiration Date, Security Code, Cardholder Name) use .gform-field-label--type-sub. The field uses native input and select elements; the expiration month/year is a native select. When SSL is not enabled, an insecure page warning (.gfield_creditcard_warning) appears above the field.
For full variable definitions, see the separate CSS API documentation.
Container
The Credit Card field uses .gfield--type-creditcard, .gfield--input-type-creditcard, and .ginput_container_creditcard. The input container wraps all sub-inputs in a .gform-grid-row. Use .ginput_container_creditcard when targeting container layout, spacing, or grid behavior.
/* example: credit card field container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .ginput_container_creditcard {
--gf-ctrl-bg-color: #f9f9f9;
--gf-ctrl-border-color: #e5e7eb;
padding: 12px 0;
}
/* example: credit card field container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_container_creditcard {
--gf-ctrl-bg-color: #f9f9f9;
padding: 16px 0;
}
/* example: specific credit card field – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 .ginput_container_creditcard {
padding: 8px 12px;
}
Card Icons
Container
The card icon container (.gform_card_icon_container) displays supported card type icons (Visa, Mastercard, American Express, Discover, etc.) above the card number input.
/* example: card icon container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon_container {
margin-block-end: 16px;
}
/* example: card icon container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .gform_card_icon_container {
margin-block-end: 12px;
}
Note: Individual card icons are SVG background images. To change icon size or layout, target the container or use direct properties; icon visuals are not controlled by CSS API variables.
American Express
/* example: American Express icon – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon_amex {
/* No CSS API variable; use direct properties if needed */
opacity: 0.9;
}
Discover
/* example: Discover icon – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon_discover {
opacity: 0.9;
}
Mastercard
/* example: Mastercard icon – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon_mastercard {
opacity: 0.9;
}
Visa
/* example: Visa icon – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon_visa {
opacity: 0.9;
}
Card Number Input
The card number input sits inside .ginput_full (or .ginput_full_admin in admin). Control variables apply to the input; use .gfield--type-creditcard to scope them.
/* example: card number input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--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-border-color-focus: #204ce5;
--gf-ctrl-font-size: 16px;
}
/* example: card number input – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-border-color: #d2d5db;
}
/* example: card number input width – no variable; use direct property – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .ginput_full input {
max-width: 100%;
}
Expiration
Container
The expiration area uses .ginput_cardinfo_left (a fieldset with legend) and .ginput_card_expiration_container for the month/year selects.
/* example: expiration container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .ginput_cardinfo_left {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: expiration container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_cardinfo_left {
--gf-ctrl-label-color-tertiary: #112337;
}
Month
The expiration month is a native select with class .ginput_card_expiration_month.
/* example: expiration month select – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-select-icon-size: 10px;
}
/* example: expiration month select – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_card_expiration_month {
--gf-ctrl-bg-color: #ffffff;
}
Note: The select element is native and may look different across browsers and OS. Full customization via CSS may be limited.
Year
The expiration year is a native select with class .ginput_card_expiration_year.
/* example: expiration year select – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-select-icon-size: 10px;
}
/* example: expiration year select – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_card_expiration_year {
--gf-ctrl-border-color: #d2d5db;
}
Security Code
Container
The security code area uses .ginput_cardinfo_right, which wraps the input and the CVC icon.
/* example: security code container – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .ginput_cardinfo_right {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
}
/* example: security code container – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard .ginput_cardinfo_right {
--gf-ctrl-label-color-tertiary: #112337;
}
Input
The security code input has class .ginput_card_security_code.
/* example: security code input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--gf-ctrl-bg-color: #ffffff;
--gf-ctrl-bg-color-hover: #f5f5f5;
--gf-ctrl-border-color: #d2d5db;
--gf-ctrl-font-size: 16px;
}
/* example: security code input width – no variable; use direct property – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .ginput_cardinfo_right .ginput_card_security_code {
max-width: 7rem;
}
Icon
The security code icon (CVC/CVV hint) uses .ginput_card_security_code_icon. It is an SVG background image; there is no CSS API variable for it.
/* example: security code icon – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .ginput_card_security_code_icon {
margin-inline-start: 0.5em;
}
Cardholder Name
The cardholder name input sits in the last .ginput_full span and uses the same control variables as other text inputs.
/* example: cardholder name input – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--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: 14px;
}
/* example: cardholder name – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard {
--gf-ctrl-label-color-tertiary: #112337;
}
Sub-labels
Sub-labels (Card Number, Expiration Date, Security Code, Cardholder Name) use .gform-field-label--type-sub and the tertiary label variables.
/* example: credit card sub-labels – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--gf-ctrl-label-color-tertiary: #1a365d;
--gf-ctrl-label-font-size-tertiary: 14px;
--gf-ctrl-label-font-weight-tertiary: 500;
}
/* example: credit card sub-labels – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard {
--gf-ctrl-label-color-tertiary: #112337;
--gf-ctrl-label-font-size-tertiary: 15px;
}
Field Label
The main Credit Card field label uses the standard .gform-field-label and primary label variables.
/* example: credit card field label – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--gf-ctrl-label-color-primary: #1a365d;
--gf-ctrl-label-font-size-primary: 16px;
}
/* example: credit card field label – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard {
--gf-ctrl-label-color-primary: #112337;
--gf-ctrl-label-font-size-primary: 18px;
}
Field Description
When a description is set, it appears above or below the field depending on the form’s description placement. Use --gf-ctrl-desc-color and --gf-ctrl-desc-font-size.
/* example: credit card field description – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--gf-ctrl-desc-color: #6b7280;
--gf-ctrl-desc-font-size: 14px;
}
SSL Warning
When the form is not served over SSL, a warning appears above the credit card field. The field gets .gfield_creditcard_warning, and the message uses .gfield_creditcard_warning_message. Use description-like variables for the message text.
/* example: credit card SSL warning message – applies to all Orbital forms */
.gform-theme--framework .gfield_creditcard_warning .gfield_creditcard_warning_message {
--gf-ctrl-desc-color: #c02b0a;
--gf-ctrl-desc-font-size: 14px;
}
/* example: credit card SSL warning container – applies to all Orbital forms */
.gform-theme--framework .gfield_creditcard_warning {
background-color: rgba(192, 43, 10, 0.08);
border: 2px solid #c02b0a;
padding: 12px;
}
Use Case Examples
Credit card field with accent border
/* example: credit card field with accent border – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-border-color-hover: #044ad3;
--gf-ctrl-border-color-focus: #204ce5;
--gf-ctrl-radius: 6px;
}
/* example: same – applies just to form ID #112 */
.gform-theme--framework#gform_wrapper_112 .gfield--type-creditcard {
--gf-ctrl-border-color: #204ce5;
--gf-ctrl-radius: 6px;
}
Targeting a specific credit card field
/* example: specific credit card field by ID – applies just to form 112, field 4 */
.gform-theme--framework#gform_wrapper_112 #field_112_4 {
--gf-ctrl-bg-color: #f8fafc;
--gf-ctrl-label-color-primary: #0f172a;
--gf-ctrl-label-color-tertiary: #334155;
--gf-ctrl-desc-color: #64748b;
}
Card icon container spacing
/* example: card icon container spacing – applies to all Orbital forms */
.gform-theme--framework .gfield--type-creditcard .gform_card_icon_container {
margin-block-end: 12px;
}
.gform-theme--framework .gfield--type-creditcard .gform_card_icon {
margin-inline-end: 0.5rem;
}
CSS API Reference
For full variable definitions, see the CSS API documentation.