如何为Adyen自定义卡片输入框（iframe内）添加CSS伪类样式

• 通过AdyenCheckout的styles配置嵌套伪类选择器
  Adyen的styles配置支持深层嵌套的CSS选择器，你可以直接在input样式下定义:focus和:hover状态的样式，示例代码如下：

const checkout = new AdyenCheckout({
  // 你的其他配置（如clientKey、environment等）
  styles: {
    card: {
      input: {
        // 基础样式可选
        border: '1px solid #ccc',
        // 聚焦状态修改outline
        ':focus': {
          outline: '2px solid #0066cc'
        },
        // 可选：hover状态样式
        ':hover': {
          borderColor: '#0066cc'
        }
      }
    }
  }
});

• 跨iframe注入自定义样式（仅限同域场景）
  如果上述配置不生效，且你的自定义组件iframe与父页面同域，可以通过动态注入样式表的方式修改伪类样式：

// 获取卡片组件对应的iframe
const cardIframe = document.querySelector('[data-adyen="card"] iframe');
if (cardIframe) {
  cardIframe.onload = () => {
    const customStyle = document.createElement('style');
    customStyle.textContent = `
      input:focus {
        outline: 2px solid #0066cc !important;
      }
      input:hover {
        border-color: #0066cc !important;
      }
    `;
    cardIframe.contentDocument.head.appendChild(customStyle);
  };
}

注意：如果是Adyen托管的iframe（跨域），无法使用第二种方法，必须依赖第一种styles配置方案。

内容的提问来源于stack exchange，提问作者AshNaz87