小程序input框修改placeholder文字描述的样式

SVINO

已于 2022-12-20 16:47:06 修改

阅读量1.3k

点赞数

分类专栏：微信小程序 CSS 文章标签：小程序前端

于 2022-12-20 16:44:34 首次发布

本文链接：https://blog.csdn.net/weixin_42611825/article/details/128386660

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

微信小程序

2 篇文章 0 订阅

订阅专栏

最近做小程序项目遇到一个小需求，产品经理觉得input框里的文字描述字体颜色太深了，要求把颜色改淡一点

我们可以使用placeholder-class来修改，直接上代码

<view class='modal-item'>
  <input v-model='code' class='text-input' type='text' placeholder-class="color"
   placeholder='请输入兑换码'>
</view>

效果如下：

后面仔细阅读微信小程序官方文档发现，placeholder-style与placeholder-class都可以使用

优惠劵

SVINO

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小程序input框修改placeholder文字描述的样式

小程序input框中placeholder-style与placeholder-class属性
复制链接

扫一扫

专栏目录

微信小程序 (十七)input 组件详细介绍

01-21

input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义...input class=input type=number placeholder=请输入账号 placeholder-style=color: red bindinput=listenerPhoneInput /> <view

pc,微信小程序改变input输入框placeholder的字体样式

qq_45067263的博客

06-23

828

pc端：微信小程序： input:

参与评论您还未登录，请先登录后发表或查看评论

小程序改变input框place-holder的样式

qq_42859450的博客

06-06

478

1、样式style控制placeholder-style=“color:#CDCDCD” 2、类名控制placeholder-class=“placeho” .placeho{color:red}

微信小程序修改placeholder样式

qq_17859117的博客

03-10

1078

微信小程序有既定的修改placeholder的标签。

web和微信小程序设置placeholder样式

小马甲

11-30

1386

在页面布局时经常会用到`input`输入框，有时为了提示用户输入正确的信息，需要用`placeholder`属性加以说明。`placeholder` 是`HTML5` 中新增的一个属性，需要注意浏览器的兼容性。。`placeholder`可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的`placeholder`属性。

CSS：浏览器设置placeholder样式 / 微信小程序设置placeholder样式

snowball的博客

11-24

2328

设置浏览器的placeholder样式在小程序中设置placeholder样式需要使用组件的内置属性。在上面的示例中，placeholder-style属性被设置为一个字符串，包含了CSS样式。在这个字符串中，您可以设置任何CSS样式属性，例如颜色、字体大小、字体样式等。请注意，这些属性仅适用于placeholder文本，而不是输入的文本。如果您需要设置输入文本的样式，应该将样式应用到输入框或文本域本身。

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

maoge_666的博客

07-24

2228

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

微信小程序: input输入框placeholder样式的修改

热门推荐

酷伊奥

07-19

1万+

相信大伙在开发微信小程序的时候都会遇到这种问题。因为客户的需求，所以我们需要对input框中的placeholder的样式进行修改。接下来告诉大家怎么修改，该方法仅适用于微信小程序。一、我们要给placeholder定义一个样式的名称，，这里我们需要用到placeholder-class这个属性 <view> <input type="text" placeholder="好唔开心啊" placeholder-class="placeholder-style" /> &.

微信小程序 input输入框控件详解及实例（多种示例）

01-19

今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的使用。首先主页面中将登录的...

HTML5 input placeholder 颜色修改示例

01-21

Chrome支持input=[type=text]占位文本属性，但下列CSS样式却不起作用： CSS 复制代码代码如下: input[placeholder], [placeholder], *[placeholder] { color:red !important; } HTML input语句复制代码代码如下...

微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

12-28

上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 ...input class= disabled placeholder=请输入关键字 value={{searchValue}}/> <view clas

微信小程序批量监听输入框对按钮样式进行控制的实现代码

01-19

input placeholder=请输入6~12位密码 name=password value={{password}} data-model=password bindinput=inputWacth type=password maxlength=12 class=form-item-input></input> inputWacth: function (e)...

智慧药房系统源码解析：开发高效医保购药小程序教学

wy15564849548的博客

04-27

416

智慧药房系统由前端和后端两部分组成。医保购药小程序则是智慧药房系统的一个重要应用场景，其功能主要包括药品浏览、医保结算、在线咨询等。

陪诊小程序的市场潜力与发展趋势研究

2402_83689311的博客

04-24

538

随着社会的快速发展和人口老龄化的加剧，医疗服务需求日益增长，而陪诊服务作为医疗服务的重要补充，正逐渐受到人们的关注和青睐。陪诊小程序利用互联网技术，将陪诊服务与用户需求紧密连接，提高了服务的便捷性和效率。他们往往需要更加细致的照顾和陪伴，而陪诊小程序能够提供专业的陪诊服务，满足老年人的需求。随着技术的不断创新和市场的不断拓展，陪诊小程序将在未来医疗服务领域发挥更加重要的作用，为人们的生活带来更多便利和舒适。通过拓展海外市场，引入国际先进的陪诊服务理念和模式，提升陪诊小程序的国际竞争力。

扭蛋机小程序对市场的发展有哪些推动作用？

guanpinkeji的博客

04-25

820

近几年，扭蛋机发展的非常迅猛。扭蛋机市场的发展具有非常大的潜力，通过不断创新发展，满足消费者的需求，让扭蛋机变得更加有趣。目前，在市场需求增长和科学技术的进步下，扭蛋机进行了创新发展，与互联网进行融合，打造线上扭蛋机小程序，在市场的激烈竞争中，能够让企业稳占市场。5、线上平台利用互联网技术，可以实现商家人力物力的减少，降低运营成本，进行统一管理，也能更好实现营销策略，提高利润收益。3、扭蛋机小程序为企业打造了专属的品牌形象，企业可以通过小程序与知名IP合作，推出品牌专属的商品，提高企业的品牌形象。

洗鞋店上门预约小程序

zhuainiukeji888的博客

04-27

337

该系统凭借先进的技术支撑，实现了在线支付、智能推送等多样化功能，让你感受到前所未有的便捷。同时，我们注重用户体验，力求为你提供简单、直观的操作体验，让你在洗鞋的过程中享受到轻松愉快的时光。洗鞋上门预约小程序，一款针对洗鞋行业的移动应用，让你轻松享受洗鞋的便捷服务。简洁明了的操作界面，让你快速下单，享受高效的洗鞋体验。此外，该系统支持二次开发，你可以根据自己的需求进行定制，实现更加个性化的服务。洗鞋上门预约小程序，让你在繁忙的生活中轻松找到洗鞋的好帮手，为你的生活带来更多便利。

线上社交app的搭建，圈子社交系统，小程序＋app＋H5三端，源码交付，支持二开！

DKfanfan的博客

04-26

729

线上社交app的搭建，圈子社交系统，小程序＋app＋H5三端，源码交付，支持二开！

在 H5 页面和 uniapp 小程序之间进行数据通信

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交