React登录表单密码输入框尺寸异常 自定义样式不生效

这不是密码输入框的样式配置有什么特殊隐藏规则，本质是浏览器默认用户代理样式的覆盖冲突——无数前端开发者刚接触表单开发时都踩过这个坑：哪怕给文本框和密码框写了逐字相同的属性选择器规则，实际渲染尺寸就是对不上。

• Webkit内核浏览器（Chrome、Edge、Safari）会给input[type="password"]附加一组独立的默认样式，最容易造成视觉偏差的项包括：默认不继承父元素的字体大小、内置密码可见性切换图标的占位计算、默认使用content-box盒模型而非开发者预期的border-box
• 样式选择器优先级不足：如果项目里引入了第三方UI组件库、全局公共CSS，这类规则往往会用更高优先级的类选择器、甚至内联样式，覆盖你写的低优先级属性选择器规则，很多人排查时只看自己写的代码，根本没注意到生效的实际规则是被其他来源覆盖的
• 没有关闭原生控件的外观渲染开关：如果没给input设置appearance: none，浏览器会优先按照原生表单控件的固定尺寸渲染，不会完全应用你自定义的CSS宽度、内边距规则

• 不要分别给text和password输入框写重复的样式，直接提取公共规则统一设置，减少重复代码的同时也能避免两个控件的样式出现偏差：

/* 全局表单控件基础重置 */
input {
  /* 关闭原生控件默认渲染 */
  appearance: none;
  -webkit-appearance: none;
  /* 统一盒模型计算逻辑，确保宽度设置包含边框和内边距 */
  box-sizing: border-box;
  /* 强制继承父元素字体，避免浏览器给密码框单独设置更小的字号 */
  font: inherit;
  /* 后续填入你原本定义的宽度、内边距、边框样式即可 */
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

• 如果重置规则写完尺寸还是不对，按F12打开开发者工具，选中尺寸异常的密码框，在样式面板里查看哪条CSS规则把你写的宽度、内边距属性划掉了，把对应规则的优先级调高即可。最省事的方式是给两个输入框加同一个通用类名（比如.login-input），用类选择器写样式，优先级远高于属性选择器，基本不会被意外覆盖。
• 不需要给密码框加任何特殊的适配规则，重置完原生默认样式后，它的渲染逻辑和普通文本输入框完全一致。

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