CSS applies inconsistently to fields in Payment Gateway (Square)

Note how all fields on the form got the rounded corners as expected. But only the name fields in the payment gateway area had the CSS applied, not the bottom CC#, CVV, Expiration Date, and Postal Code.

One would expect the CSS formatting to be applied consistently and reliably.

These text boxes are different from the normal input textbox. To make it look like the normal textbox design, please inject the custom CSS code below into your form:

.square-hosted-fields {
    padding : 4px 8px;
    font-size : 14px;
    background-image : none;
    border-radius : 4px;
    box-shadow : none;
}

Guide: How to Inject Custom CSS Codes

Thanks for the tip - I'll try that.

The default display should present consistent formatting, however, without add'l CSS work by your users. Note that the top two fields and bottom four fields are all within the Square payment gateway widget... one expects fields in the same gateway box to come out looking the same. The way it presents now just looks sloppy and half-baked.

Thanks for the feedback.

Our developers are constantly improving the UI and Jotform other features. Please don't hesitate to contact us if you need further assistance.