密码输入框的type="password"无法美化内部圆点，仅可控制外围样式；需用border-radius、padding、:focus-visible、background-image等实现安全美观，兼顾可访问性与多端兼容。
密码输入框的 type="password" 本身不支持直接美化内部圆点
浏览器对 <input type="password"> 的掩码字符（默认是黑点）做了硬编码控制，CSS 无法通过 ::placeholder 或 text-security（已废弃且仅 Safari 旧版支持）修改其显示形态。强行用伪元素覆盖会破坏可访问性与聚焦行为，也不推荐。
真正可控的是「外围样式」：边框、背景、圆角、字体、高度、阴影、过渡动画等。所有视觉提升都应围绕这些展开。
- 优先使用
border-radius配合border或outline控制轮廓，避免用appearance: none导致 Safari 失去原生聚焦态 - 设置
padding保证文字垂直居中（尤其在 Windows Chrome 中默认偏低） - 禁用默认
outline后，必须用:focus-visible+box-shadow提供清晰焦点反馈
用 background-image 模拟自定义密码图标（不遮挡输入）
很多设计稿要求右侧带“眼睛”图标切换明文，但图标不能挡住输入区域或干扰光标定位。安全做法是用 background-image + padding-right 留出空间，再配合 JS 切换 type 值。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 图标用 SVG 内联 base64，避免额外请求：
background-image: url("data:image/svg+xml,%3Csvg...%3E") -
background-position: right 12px center精确对齐，background-repeat: no-repeat -
padding-right: 40px（根据图标宽高调整），确保文字不顶到图标 - 点击区域需单独加
<button type="button"></button>覆盖在输入框右侧，用position: absolute定位，否则背景图无法响应点击
暗色模式下 color 和 background 必须同步适配
密码框在深色界面里如果只改了 background 却没调 color，文字会发灰甚至不可读；反之亦然。不能依赖用户系统设置自动适配，必须显式声明。
推荐写法：
@media (prefers-color-scheme: dark) {
input[type="password"] {
background: #2d3748;
color: #e2e8f0;
border-color: #4a5568;
}
}
- 避免用
!important覆盖第三方 UI 库的样式，优先提高选择器权重 - 测试 iOS Safari —— 它有时会强制给密码框加黄色背景，需用
:-webkit-autofill覆盖：input[type="password"]:-webkit-autofill { background: transparent; }
移动端软键盘弹出时，height 和 font-size 易错配
Android 和 iOS 对 font-size 的输入框会自动放大，导致布局跳动；而固定 <code>height 又可能和缩放后字体冲突。最稳方案是放弃固定 height，用 min-height + line-height 对齐。
- 设
font-size: 16px是底线，低于此值就触发双击缩放逻辑 - 用
line-height: 1.5替代height: 40px，让行高撑开容器，更兼容不同字体渲染 - iOS 上若仍出现底部留白，加
padding-bottom: 2px微调（实测有效）
padding-right 值、多写的两行 :-webkit-autofill、以及不敢删掉的 :focus-visible 样式——它们不是装饰，是用户能顺利登录的最后一道防线。 
