input backgroundColor style is not used

[peaceful-james]

Describe the bug

Specifying input backgroundColor on styles when calling payments.card(options) does not work.

All other styles work, including input color and border and focused input background color.

To Reproduce

function getCardOptions(colorMode) {
  const dark = colorMode === "dark";
  const color = dark ? "#dfd6ea" : "#000000";
  const errorColor = dark ? "#db2777" : "#ff7564";
  const background = dark ? "#1e293b" : "#ffffff";
  const fontSize = "14px";
  const fontWeight = "400";
  const fontFamily = "sans-serif";
  const borderColor = dark ? "#475569" : "#231902";
  const borderColorFocused = dark ? "#64748b" : "#f36705";

  return {
    style: {
      ".input-container": {
        borderColor: borderColor,
        borderRadius: "6px",
        borderWidth: "1px",
      },
      ".input-container.is-error": {
        borderColor: errorColor,
        borderWidth: "2px",
      },
      ".input-container.is-focus": {
        borderColor: borderColorFocused,
        borderWidth: "1px",
      },
      ".message-icon": {
        color: color,
      },
      ".message-icon.is-error": {
        color: errorColor,
      },
      ".message-text": {
        color: color,
      },
      ".message-text.is-error": {
        color: errorColor,
      },
      input: {
        backgroundColor: background,
        color: color,
        fontFamily: fontFamily,
        fontSize: fontSize,
        fontWeight: fontWeight,
      },
      "input.is-error": {
        color: errorColor,
      },
      "input.is-error::placeholder": {
        color: errorColor,
      },
      "input.is-focus": {
        backgroundColor: background,
        color: color,
        fontFamily: fontFamily,
        fontSize: fontSize,
        fontWeight: fontWeight,
      },
      "input.is-focus::placeholder": {
        color: color,
      },
      "input::placeholder": {
        color: color,
      },
    },
  };
}

async function initializeCard(payments, colorMode) {
  const cardOptions = getCardOptions(colorMode);
  const card = await payments.card(cardOptions);
  await card.attach("#card-container");
  return card;
}

Expected behavior

Background color of input should...work

Screenshots

Focused background color works:

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 136.0.7103.114 (Official Build) (64-bit)

Additional context

None

[peaceful-james]

I want to add something to do this.

I think you should give us the ability to set the backgroundColor of the entire form (bit on the right is still white).

As you can see in my 2nd screenshot above, a part of the form is still unstyled. I think setting the form backgroundColor is the only way to affect that part.