纯CSS无法独立实现密码强度提示条，必须由JavaScript监听输入并设置data-strength属性，CSS仅通过transition、width、background-color及属性选择器（如[data-strength="weak"]）响应状态变化，实现平滑的颜色与宽度动画。
密码强度提示条需要哪些CSS属性支撑
纯CSS实现密码强度提示条，核心是利用 input[type="password"] 的实时输入状态配合伪类和属性选择器，但必须承认：CSS 本身无法读取密码内容或计算强度。所谓“纯CSS方案”，实际是把强度判断逻辑交给 JS，CSS 只负责视觉反馈——比如用不同颜色、宽度、文字提示来呈现当前强度等级。
关键点在于：CSS 要能响应 JS 动态添加的 class（如 strength-weak、strength-medium），而不是试图自己解析字符串。常见错误是写一堆 :has(input[value*="a"]) 这类选择器，不仅无效（value 属性在 DOM 中通常为空），而且不兼容旧浏览器。
- 必须由 JS 监听
input事件并设置 class，CSS 只做样式映射 - 推荐用
data-strength属性而非 class，语义更清晰，也方便后续用 CSS 自定义属性联动 - 避免用
:focus-within或:valid直接驱动强度条——它们只反映表单验证状态，不是强度
如何用CSS控制提示条颜色和宽度变化
提示条通常是 <div class="strength-bar"></div>，放在密码输入框下方。它的视觉变化靠 background-color 和 width 驱动，且需平滑过渡。
示例片段：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
.strength-bar {
height: 4px;
border-radius: 2px;
transition: width 0.3s, background-color 0.3s;
}
.strength-bar[data-strength="weak"] {
width: 33%;
background-color: #ff6b6b;
}
.strength-bar[data-strength="medium"] {
width: 66%;
background-color: #ffd93d;
}
.strength-bar[data-strength="strong"] {
width: 100%;
background-color: #4ecdc4;
}
- 务必声明
transition，否则宽度/颜色会突变 - 用
data-strength而非 class 控制状态，避免 class 名冲突或冗余 - 不要用
max-width替代width——它不会触发 transition 动画
为什么不能用 :placeholder-shown 检测空密码
有人尝试用 input:placeholder-shown + .strength-bar 隐藏提示条，以为能“自动响应空值”。但 :placeholder-shown 在密码框中基本不可靠：多数浏览器对 type="password" 不触发该伪类，即使 placeholder 存在，输入任意字符后它也不会回退到“shown”状态。
- 真实场景中，用户可能删光内容，但
:placeholder-shown仍不匹配 - 更稳妥的做法是 JS 监听
input事件，检查input.value.length === 0，然后显隐提示条 - 如果坚持用 CSS 控制显隐，可用
[data-empty="true"]配合 JS 切换，再写.strength-bar[data-empty="true"] { opacity: 0; }
移动端键盘弹起时提示条被遮挡怎么办
在 iOS Safari 或部分安卓 WebView 中，密码框获得焦点后软键盘弹出，常把底部的提示条顶出可视区。这不是 CSS 能独立解决的问题，但 CSS 需配合布局策略：
- 避免把提示条绝对定位在 input 下方固定位置；改用 flex 布局让父容器自然撑开
- 给包含 input 和提示条的容器加
scroll-margin-bottom: 60px，配合scrollIntoView({ behavior: 'smooth', block: 'nearest' })（JS 触发） - 不要用
position: fixed或transform: translateY()强行上移——会破坏滚动锚点
真正起作用的是 JS 检测 visualViewport 高度变化，再动态调整容器 padding-bottom，CSS 只负责响应这个 padding 变化。
