微信小程序中修改input中的placeholder字体颜色，字体大小

最新推荐文章于 2024-08-09 10:04:27 发布
最新推荐文章于 2024-08-09 10:04:27 发布
阅读量6.3k 收藏 8
点赞数 6
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31754591/article/details/113116556
版权

wxml

<input type="text" placeholder="请输入材料名称" placeholder-class="phcolor" />

wxss

.phcolor{
	color:#C8C9CC;
	font-size: 15px;
}

效果：
在这里插入图片描述

codernmx
关注
专栏目录
web和微信小程序设置placeholder样式
小马甲
11-30 2055
在页面布局时经常会用到`input`输入框，有时为了提示用户输入正确的信息，需要用`placeholder`属性加以说明。`placeholder` 是`HTML5` 中新增的一个属性，需要注意浏览器的兼容性。。`placeholder`可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的`placeholder`属性。
微信小程序设置placeholder颜色
包子源的博客
04-26 2189
<input placeholder-style="color:#BBBBBB" placeholder='请选择出发地'></input>
小程序中修改input的placeholder字体颜色样式
qq_39951524的博客
01-22 2112
小程序中修改input的placeholder字体颜色样式
input输入框的placeholder文字过大怎么修改
fury的博客
08-09 174
input输入框的placeholder文字过大怎么修改。
微信小程序修改input中的placeholder字体颜色
青衫折扇的博客
04-14 1万+
wxml <input class="search-size" confirm-type="search" value="{{inputValue}}" type="text" bindinput="getInputValue" placeholder="搜索品牌或商品" placeholder-class="phcolor"></input> wxss .p...
如何修改uni微信小程序editor组件和input组件的placeholder默认样式
T3165919332的博客
05-29 1186
先来看看原本的editor的placeholder默认样式。如下，我现在把它改成红色字体取消倾斜。使用 placeholder-class，官网（
修改 input 中 placeholder的 颜色和 字体大小
qq_55681529的博客
06-08 5798
【代码】修改 input 中 placeholder的 颜色和 字体大小。
微信小程序-两个input叠加，多次点击字体变粗或闪动
03-29
当两个input叠加，多次点击input框， placeholder 字体变粗或input框闪动。如图： (此图片来源于网络，如有侵权，请联系删除! )   代码：   <!-- 最上层input-1 --> <input placeholder='\u8bf7\u8f93\u...
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
微信小程序中的ios兼容性问题
03-29
3.微信小程序中解决ios中new Date() 时间格式不兼容 在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常 let ...
微信小程序input自动聚焦后placeholder文字位置上移
HuLuWa1997的博客
11-21 3932
问题： 这个问题出现的原因是给input上面给了上下的padding或者margin值 解决方法是给input给height和line-height 代码如下： <view class="searchView"> <image class="backImgStyle" src="{{imageUrl}}/epacSearch/backIcon.png" bindtap="backPage"></image> <input class="se
微信小程序占位符(placeholder)颜色等样式修改方法
前端一线搬运工的博客
06-22 1万+
1.wxml上给input一个占位符的样式placeholder-class="xxx",值随便取一个;&lt;input placeholder="我是占位符" placeholder-class="zhanweifu"&gt;2.在wxss样式文件获取上面的类名,如下即可修改.zhanweifu{ color: #333; }理论上支持修改其他样式,我就不一一试了;...
微信小程序学习：placeholder颜色设置&navigator标签
一杯冰啤
04-21 4515
在css中，设置placeholder颜色应该如下：input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #bbb; }input::-moz-placeholder, textarea::-moz-placeholder { color: #bbb; }input:-ms-input-plac...
小程序placeholder设置自定义颜色
qq_41353397的博客
11-03 353
wxml代码： <view class='inp'> <input placeholder-class="phcolor" class="input-text" name="username" placeholder="测试placeholder" /> </view> wxss代码： .phcolor{ color: #18acff; }
placeholder改变字体颜色----小程序input和textarea中的placeholder改变样式
张火火
06-09 1万+
&lt;!--pages/index/complain/complain.wxml--&gt;&lt;view class='nav'&gt; &lt;textarea class='content' placeholder-style='color:#ccc' rows="5" resize="true" placeholder="投诉内容显示,商品质量、送单员问题、拖延到货时间等真实情况反...
uniapp 微信小程序 placeholder字体、颜色自定义
maoge_666的博客
07-22 2266
uniapp 微信小程序 placeholder字体、颜色自定义
微信小程序修改placeholder样式
qq_17859117的博客
03-10 3039
微信小程序有既定的修改placeholder的标签。
微信小程序-自定义placeholder颜色和样式
热门推荐
怪力马猴烧酒的博客
07-01 6万+
自定义placeholder颜色和样式 如图，这是微信小程序input组件的官方文档描述，下图红框里的placeholder-style和placeholder-class就是微信小程序里用来给placeholder设置样式的属性。 一、使用placeholder-style设置样式 placeholder-style相当于在标签的style属性，可直接在标签内设置。 用法： &amp;...
uni-easyinput disabled后placeholder字体颜色怎么改
最新发布
09-13
uni-easyinput是基于小程序生态的一个富文本输入组件，当`disabled`属性设置为`true`后，组件通常会有禁用状态，包括提示文字的颜色会默认变为灰色或深色以示不可操作。如果你想改变这种状态下placeholder的字体颜色，可以尝试通过自定义样式覆盖默认样式。 具体步骤如下： 1. 首先，在你的项目中找到`.wx-input-disabled.wx-textarea-placeholder`这个CSS选择器，这是微信小程序对禁用输入框placeholder的默认样式。 2. 创建一个新的CSS规则，比如在`app.wxss`或者其他自定义样式文件中添加： ```css .custom-unieasyinput { .wx-input-disabled.wx-textarea-placeholder { color: /* 你需要的新颜色，例如红色 #ff0000 或者白色 #ffffff */; } } ``` 3. 然后在需要应用新样式的uni-easyinput上添加`class="custom-unieasyinput"`，例如： ```html <uni-easyinput :disabled="isDisabled" class="custom-unieasyinput" placeholder="请输入内容"></uni-easyinput> ``` 其中`isDisabled`是一个控制disabled状态的变量。 请注意，这可能会因为微信小程序的更新而有所变化，如果官方文档有新的API支持更改此样式，建议查阅最新文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codernmx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值