| [ Web Proxy ] |
| Viewing: https://developer.squareup.com/reference/sdks/web/payments/objects/CardClassSelectors | [Back] [Original] |
Objects
The stylesheet classes assigned to input fields by field state
Use this object to set the appearance of Card input fields by their current focus and input validity state. Note: font size has a maximum of 16px.
Media Queries can be used with valid CardClassSelectors. Syntax support for level 3 features
The default style of the Card payment method component
The style of the Card payment method component when an input field is in an error state
The style of the Card payment method component when it has focus
The style of the input field helper icon
The style of the input field error icon
The style of the input field helper text
The style of the input field error text
The default style of a Card input field
The style of an input field when the field is in an error state
The style of an input field placeholder when the field is in an error state
The style of an input field that has focus
The style of an input field placeholder when the field has focus
The default style of an input field placeholder
const cardClassSelectors = {
input: {
backgroundColor: '#F7F8F9',
color: '#373F4A',
fontFamily: 'Helvetica Neue',
fontSize: '16px',
fontWeight: 'normal'
},
'input.is-focus': {
backgroundColor: '#F7F8F9',
color: '#3X3F4A',
fontFamily: 'Helvetica Neue',
fontSize: '16px',
fontWeight: 'normal'
},
'.input-container': {
borderColor: 'lightgrey',
borderWidth: '1px',
},
'.input-container.is-focus': {
borderColor: '#cc0023',
borderWidth: '0 0 2px 0',
},
'.input-container.is-error': {
borderColor: '#006aff',
borderWidth: '0 0 2px 0',
},
'.message-icon': {
color: 'green',
},
// You can use media queries with valid selectors:
'@media screen and (max-width: 600px)': {
input: {
'fontSize': '12px',
}
}
'@media only screen and (orientation: portrait)': {
'.message-text': {
'color': 'transparent',
}
}
}| Web Proxy Viewer | New URL | Original Page |