uni-app input组件里的placeholder-class无法使用定义的css变量

uni-app input组件里的placeholder-class无法使用定义的css变量

示例代码：

<template>  
<view class="inputBox">  
<input  
          type="text"  
          placeholder="请问您要咨询什么呢"  
          class="input"  
          placeholder-class="input-placeholder"  
        />  
</view>  
</template>  
<style lang="scss" scoped>  
.inputBox {  
  --color-link: #0066ff;  
}  

.input-placeholder {  
  color: var(--color-link);  
}  
</style>

操作步骤：

<template>  
<view class="inputBox">  
<input  
          type="text"  
          placeholder="请问您要咨询什么呢"  
          class="input"  
          placeholder-class="input-placeholder"  
        />  
</view>  
</template>  
<style lang="scss" scoped>  
.inputBox {  
  --color-link: #0066ff;  
}  

.input-placeholder {  
  color: var(--color-link);  
}  
</style>

预期结果：

  • placeholder字体颜色变为#0066ff

实际结果：

  • 为默认颜色

bug描述：

input组件里的placeholder-class无法使用定义的css变量

开发环境 版本号 项目创建方式
Windows 11 HBuilderX
iOS iOS 19
iPad pro 2024 vue3

更多关于uni-app input组件里的placeholder-class无法使用定义的css变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

自测低版本是否正常？我自测 17.0 模拟器正常，不是 nvue 吧，先排除高版本ios 的问题

更多关于uni-app input组件里的placeholder-class无法使用定义的css变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是uvue

选错平台了，是uni-app x

安卓上也试过了，也是一样不生效

我试了一下.input-placeholder { –color-link: #0066ff; color: var(–color-link); }不生效.input-placeholder { color: var(#0066ff); }生效

回复 用户2841799: 目前属性不支持css变量

在uni-app中，placeholder-class 确实无法直接使用CSS自定义属性（CSS变量），这是因为placeholder样式在部分平台（尤其是iOS WebView）的渲染限制导致的。

原因分析：

  1. 平台兼容性问题：CSS变量在placeholder伪元素中的支持度不一致，iOS的WebView内核对此支持较弱
  2. 样式作用域限制：scoped样式可能会影响CSS变量的传递
  3. 伪元素限制：placeholder实际是通过::placeholder伪元素实现的，CSS变量在伪元素中的使用存在限制

解决方案：

  1. 直接使用具体颜色值
.input-placeholder {
  color: #0066ff;
}
  1. 使用全局CSS变量 在App.vue或全局样式中定义：
:root {
  --color-link: #0066ff;
}
  1. 使用SCSS/Less变量（推荐）
<style lang="scss" scoped>
$color-link: #0066ff;

.input-placeholder {
  color: $color-link;
}
</style>
  1. 移除scoped限定
<style lang="scss">
.input-placeholder {
  color: var(--color-link);
}
</style>
回到顶部