微信小程序input不支持::placeholder，需四端分别适配：H5/PC用四种浏览器前缀，小程序用::before+data-placeholder模拟，且仅color/font-size等属性有效；主题切换需SCSS变量与rgba控制，确保对比度达标。
为什么直接写 ::placeholder 会漏掉微信小程序
微信小程序的 input 组件不支持原生 CSS ::placeholder 伪元素，编译后样式完全不生效；H5 和 App 端虽支持，但各浏览器前缀不一致：Chrome 需 ::-webkit-input-placeholder，Firefox 要 ::-moz-placeholder，IE11 用 :-ms-input-placeholder。只写一个规则，三端表现天差地别——要么全黑（小程序）、要么只在 Chrome 生效（H5）、要么文字被截断（App WebView）。
SCSS 中必须同时覆盖四套选择器
不能依赖 Autoprefixer，因为 uni-app 编译时对 input::placeholder 的跨端转换是静态的，不会自动补全小程序专用语法。得手动写出全部可识别形式，并用 SCSS 循环或重复声明确保无遗漏：
@mixin placeholder($color, $font-size) {
&::placeholder { color: $color; font-size: $font-size; }
&::-webkit-input-placeholder { color: $color; font-size: $font-size; }
&::-moz-placeholder { color: $color; font-size: $font-size; }
&:-ms-input-placeholder { color: $color; font-size: $font-size; }
/* 小程序专用：通过 class 模拟，需配合 JS 动态加类 */
&.has-placeholder::before {
content: attr(data-placeholder);
position: absolute;
left: 12rpx;
top: 50%;
transform: translateY(-50%);
color: $color;
font-size: $font-size;
pointer-events: none;
}
}调用时：@include placeholder(#999, 28rpx);
- 前四行覆盖 H5/PC 主流浏览器
- 最后一段是小程序兜底方案：用
::before+data-placeholder属性模拟，需在组件中手动控制has-placeholder类的显隐 - 注意单位统一用
rpx（uni-app 推荐），避免混用px导致小程序缩放异常
uni-app 中 input placeholder 的真实限制
即使写了完整伪元素，微信小程序里 input 的 placeholder 仍无法设置行高、背景、内边距——这些属性会被忽略。所以 SCSS 里禁止对 ::placeholder 声明 padding、line-height、background 等无效属性，否则会造成 H5 正常、小程序错位的假象。
立即学习“前端免费学习笔记（深入）”；
- 只允许设置：
color、font-size、font-weight、opacity - 禁用：
padding、line-height、background、border、transform - 字体大小建议用
rpx或em，避免固定px在大屏上过小
如何让 placeholder 样式随主题切换动态更新
uView 或自定义主题中，placeholder 颜色通常要跟随 $u-primary-color 或暗黑模式开关变化。不能写死值，得用 SCSS 变量注入 + 条件判断：
%placeholder-theme {
@if global-variable-exists(u-dark-mode) and $u-dark-mode == true {
color: rgba(255, 255, 255, 0.5);
} @else {
color: rgba(0, 0, 0, 0.4);
}
}
// 使用时
.input-field {
@extend %placeholder-theme;
@include placeholder(rgba(0, 0, 0, 0.4), 28rpx);
}关键点：
- 必须用
%placeholder-theme占位符而非类名，避免污染全局输出 -
global-variable-exists()判断变量是否存在，防止主题未启用时报错 - 颜色用
rgba()而非#xxx，确保透明度可控，适配不同背景
最常被忽略的是：placeholder 的颜色对比度必须满足 WCAG AA 标准，尤其在暗黑模式下，rgba(255,255,255,0.3) 这种低透明度白字在黑色背景上不可读——得实测，不能只看编译结果。
