微信小程序：修改提示信息placeholder颜色

雯0609~2025-03-19 2:39

方法一：使用 `placeholder-style`

直接在 input 或 textarea 组件中使用 placeholder-style 属性来设置 placeholder 的样式。

html 复制代码

<input placeholder="请输入内容" placeholder-style="color: #999; font-size: 14px;" />

或者：

html 复制代码

<textarea placeholder="请输入内容" placeholder-style="color: #999; font-size: 14px;"></textarea>

你也可以通过 placeholder-class 属性来指定一个类名，然后在对应的 .wxss 文件中定义这个类的样式。

html 复制代码

<input placeholder="请输入内容" placeholder-class="custom-placeholder" />

wxss

css 复制代码

.custom-placeholder {
  color: #999;
  font-size: 14px;
}

如果你想在整个小程序中统一设置 placeholder 的样式，可以在 app.wxss 中定义全局样式。

css 复制代码

/* app.wxss */
input::placeholder,
textarea::placeholder {
  color: #999;
  font-size: 14px;
}