怎样在SCSS中编写针对输入框占位符placeholder的跨端CSS-css教程-PHP中文网

微信小程序input不支持::placeholder，需四端分别适配：H5/PC用四种浏览器前缀，小程序用::before+data-placeholder模拟，且仅color/font-size等属性有效；主题切换需SCSS变量与rgba控制，确保对比度达标。

怎样在scss中编写针对输入框占位符placeholder的跨端css

为什么直接写 `::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 正常、小程序错位的假象。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

只允许设置：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);
}

关键点：