如何实现<input>元素文本底部对齐？解决自动填充样式异常

1. 修复浏览器自动填充背景色不一致问题 #

浏览器自动填充表单时，会给<input>添加默认黄色背景，针对iframe内的输入框，可通过CSS伪类强制覆盖样式：

/* 覆盖自动填充的默认样式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  background-color: #fff !important; /* 与你的输入框背景色保持一致 */
  box-shadow: 0 0 0 1000px #fff inset !important; /* 消除默认黄色高光 */
  -webkit-text-fill-color: #333 !important; /* 保持文本颜色正常 */
  transition: background-color 5000s ease-in-out 0s; /* 阻止浏览器重置样式 */
}

针对Firefox等其他浏览器，可配合input:-moz-autofill伪类做兼容，或直接给input设置background-color并添加!important优先级。

2. 解决文本对齐与胶囊形输入框问题 #

针对padding-top导致滚动条、圆角异常的问题，调整思路如下：

核心调整规则： #

• 用上下内边距替代单独顶部内边距，让输入框高度自适应，避免滚动条
• 利用border-radius: 999px实现胶囊形，配合box-sizing: border-box确保盒模型正确
• 取消固定行高，让输入框内容自然垂直居中

示例CSS代码： #

/* 假设iframe内输入框类名为credit-card-input */
.credit-card-input {
  box-sizing: border-box; /* 确保内边距不撑开元素 */
  width: 100%;
  padding: 12px 16px; /* 上下左右内边距，根据设计调整数值 */
  border: 1px solid #ddd; /* 与其他输入框边框样式统一 */
  border-radius: 999px; /* 胶囊形圆角 */
  font-size: 16px; /* 与其他输入框字体大小一致 */
  line-height: normal; /* 取消固定行高，让内容自然居中 */
  background-color: #fff;
  outline: none; /* 去掉默认聚焦边框，可替换为自定义样式 */
}

iframe容器样式配合： #

确保iframe不破坏布局，设置如下：

.credit-card-iframe {
  border: none; /* 去掉iframe默认边框 */
  width: 100%;
  height: auto; /* 让iframe高度自适应输入框内容 */
  min-height: 44px; /* 与其他输入框最小高度保持一致 */
}

调整后，输入框文本会自然垂直居中，胶囊形圆角正常显示，无滚动条；同时自动填充的背景色会与自定义样式统一。

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