placeholder样式自定义（uniapp 微信小程序、h5）

最新推荐文章于 2025-06-11 16:40:00 发布
原创 最新推荐文章于 2025-06-11 16:40:00 发布 · 3.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #微信小程序 #小程序

文章介绍了在uniapp和H5环境下设置input输入框占位符(placeholder)样式的两种方法。在uniapp中，可以通过行内样式或添加placeholder-class结合CSS来设置；在H5中，利用CSS的伪元素选择器修改placeholder的颜色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、使用uniapp开发
①第一种方式：（写在行内）

<input type="text" placeholder="姓名" placeholder-style="font-size:28rpx;color:#999999;" />

②第二种方式：
（给input加上placeholder-class属性，然后给该属性 设置一个类名，在style中设置样式。）

<input  type="text"  placeholder="地址" pla
最低0.47元/天 解锁文章

200万优质内容无限畅学
maoge_666
关注
微信小程序 | 借ChatGPT之手重构社交聊天小程序
陶人超有料的博客
03-27 8329
本文通过分析ChatGPT聊天界面的流式数据流效果，针对社交小程序中的具体聊天场景进行重构和实现，前端使用uniapp实现，后端可搭配python flask以及springboot中的PrintWrite方法进行效果实现！
web和微信小程序设置placeholder样式
小马甲
11-30 2440
在页面布局时经常会用到`input`输入框，有时为了提示用户输入正确的信息，需要用`placeholder`属性加以说明。`placeholder` 是`HTML5` 中新增的一个属性，需要注意浏览器的兼容性。。`placeholder`可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的`placeholder`属性。
uniapp中,placeholder样式设置
lee_srr的博客
08-07 4468
.input为input类名 .input::placeholder{ font-size: 28rpx; color: #AAAAAA; }
【uniapp】小程序中input输入框的placeholder-class不生效
m0_69301850的博客
06-11 644
color: red;
修改uniapp中 input 的 placeholder 样式
蓝枫秋千的踩坑记录
06-27 2915
最后暂时放弃先去修改输入值的属性的时候无意中发现的。比如我这边本次就是要修改。
自定义input默认placeholder样式
weixin_30652491的博客
04-19 149
input::input-placeholder { color: #fb4747; } input::-webkit-input-placeholder { color: #fb4747; } input:-ms-input-placeholder { color: #fb4747; } input:-moz-placeholder { ...
微信小程序中placeholder的样式
热门推荐
纠缠AI的亮子
04-28 2万+
通常，现代浏览器大多支持::placeholder选择器，用于设置placeholder的样式，但是在微信小程序中并不支持这种方式，而是提供了一个专门的属性（placeholder-class）来处理其样式。例如，在模版文件中这样写： &lt;input placeholder-class="place-holder" class="input-text" name="username" plac...
uniapp微信小程序项目-优购商城
zy_lalala的博客
12-12 1万+
uniapp 微信小程序 项目 优购商城
微信小程序转 uni-app（系列一）
小蓝鲸的博客
04-22 7326
一、搭建uni-app项目框架 1、通过Hbuilder可视化界面 1)下载安装 开发工具HBuilderX：官方IDE下载地址 2)创建uni-app 点击工具栏里的文件 -> 新建 -> 项目 选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。 注：Hello uni-app模板 ，是官方的组件和API示例 3)运行uni-app 浏览器运行：进入hello...
vue3 uniapp微信小程序开发功能加水印和压缩图片，可以回显图片，点击可放大，图片不得只有一部分
最新发布
06-19
考虑到兼容性，我们可以先尝试使用离屏canvas（微信小程序专有方法），在非微信小程序环境则使用H5的方式（但本需求是微信小程序，所以主要考虑微信小程序环境）。具体步骤：1.选择图片：uni.chooseImage2.遍历选择...
uniapp中placeholder样式的修改
soos的博客
08-05 1万+
第一种：行内样式，通过placeholder-style直接修改。 <input type="text" placeholder="请输入关键词" placeholder-style="color: #C0C0C0" /> 第二种：css外联样式，通过placeholder-class进行css样式的修改。 <input type="text" placeholder="请输入关键词" placeholder-class="pcs"/> ...
自定义input-placeholder
12-21
自定义input的placeholder属性为pro,细节自己看源码，源码不多，容易理解
自定义placeholder
weixin_43409286的博客
10-13 439
自定义placeholder // 修改placeholder颜色 ::-webkit-input-placeholder { color: #B5CEFF; } /* Firefox 4-18 */ :-moz-placeholder { color: #B5CEFF; } /* Firefox 19-50 */ ::-moz-placeholder { color: #B5CEFF; } /* - Internet Explorer 10–11 - Internet Explorer
自定义placeholder的样式和颜色
笨鸟肥西的博客
10-09 302
  .tes ::-webkit-input-placeholder { color: red; text-indent: .4rem; font-size: .50rem; } /*firefox 4-18*/ :-moz-placeholder { c...
uniapp 开发微信小程序修改 input 的 placeholder 的样式
Amethyst14的博客
10-18 738
uniapp 开发微信小程序修改 input 的 placeholder 的样式
uniapp修改input中placeholder样式
巴啦啦臭魔仙的博客
10-16 1551
Uniapp官方提供了两种修改的属性方法，但经过测试，只有。
Uniapp自定义Input组件 - 可控制字体的Placeholder效果
weixin_39187115的博客
12-21 658
r-inputplaceholder="自定义样式"/>
h5编辑输入框的placeholder 的样式
weixin_38304202的博客
12-21 1598
转自：http://www.webhek.com/post/html5-placeholder-css.html /* 通用 */ ::-webkit-input-placeholder { color:#f00; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f00;
自定义组件 placeholder的说明
YingUser的博客
01-26 971
//注意点： placeholder 占位符 说明 /在自定义组件上使用这个 placeholder 的时候不需要通过父传子那么复制，可以直接在自定义组件上添加即可 //因为 ： // 自定义组件：当我们给自定义组件设置属性的时候，这个属性回自动成为组件内跟标签的属性 {注意：这个属性不在子组件的props中} '例如这样' <hmInput placeholder="请输入手机号码" :value="user.username"></hmInput> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值