SqPaymentForm iframes - not responding to font size

Questions
1

This should be easy to customize but for whatever reason/s I’m unable to change font size of SqPaymentForm iframes. I’m working with the css file found here & from the screenshot below you can see it recognizes the background color css tag (I changed it to black just to test). The css I have now is

/* Define how SqPaymentForm iframes should look */
.sq-input {
  font-size: 400px !important; /* IGNORES THIS TAG */
  height: 56px;
  box-sizing: border-box;
  border: 1px solid #E0E2E3;
  background-color: black; /* THIS WORKS FINE */
  border-radius: 6px;
  display: inline-block;
  -webkit-transition: border-color .2s ease-in-out;
  -moz-transition: border-color .2s ease-in-out;
  -ms-transition: border-color .2s ease-in-out;
      transition: border-color .2s ease-in-out;
}

square_iframe

You can see the black background (doesn’t cover entire input but at least it’s recognized) but the font clearly isn’t 400px or anything other than the default even with the !important override. I do import a css theme for the entire page but I don’t think it would impact font size or if there’s something else going on. Also, the text isn’t vertically centered for the inputs…

2

The sq-input is the actual iframes, but if you’re talking about “Card Number” (etc) that appears to be the label, not part of the iframe. If that’s correct, then presumably you have a different class name for the labels to handle it.

If you’re trying to change the internal font size (of the input field), you would use the inputStyles of the SqPaymentForm instead, which handle internal styles of the iframe, versus the inputClass being external styles. ie:

var paymentForm = new SqPaymentForm({
  applicationId: applicationId,
  inputClass: 'sq-input',

  // Customize the CSS for SqPaymentForm iframe elements
  inputStyles: [{
    fontSize: '25px',
...
3

Thanks for the reply @sjosey. That got it & found everything else here to make the desired changes.

1 Like