[微信小程序]设置placeholder的文字居中

最新推荐文章于 2023-11-30 00:15:00 发布
最新推荐文章于 2023-11-30 00:15:00 发布
阅读量3.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： 移动开发 开发工具
原文链接：https://yq.aliyun.com/articles/576451
本文介绍了一种使用WXML和WSS为输入框的占位符设置样式的技巧。通过为placeholder指定一个class，在WSS中对该class进行样式定义，实现了对占位符文字居中显示的效果。

直接上代码

wxml

<input class='login-form-pwd' placeholder='请输入商家登录密码' placeholder-class="center"></input>

wss

.center{
    text-align: center;
}
效果

这里写图片描述

思路

也就是单独为placeholder设置了一个class，然后wss对这个class所对应的元素（placeholder-class对应的元素就是placeholder）定义样式；
微信小程序-页面开发
陆卿之的博客
01-02 4086
页面开发
踩坑之路——微信小程序textarea中placeholder居中问题
weixin_42556039的博客
09-11 1万+
  我们可以看到 textarea 可以设置line-height并呈现     但placeholder占位符文字却没有，设置placeholder-class、placeholder-style也不可以？？ 没有思路，我就想小程序的文档案例应该有法子，但没想到 官方案例是这样子做的案例？？？看来是莫得法子了，只能用官方案例中的方法了  ...
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
08-28
主要介绍了微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法,涉及事件绑定及this.setData动态设置属性数据的相关操作技巧,需要的朋友可以参考下
小程序input的placeholder不垂直居中的问题解决
qq_43437571的博客
08-26 4393
placeholder不垂直居中
placeholder文字居中
qq_36349264的博客
05-17 3911
.shuru input::-webkit-input-placeholder { text-align: center; }
web和微信小程序设置placeholder样式
小马甲
11-30 2457
在页面布局时经常会用到`input`输入框，有时为了提示用户输入正确的信息，需要用`placeholder`属性加以说明。`placeholder` 是`HTML5` 中新增的一个属性，需要注意浏览器的兼容性。。`placeholder`可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入用户名，什么地方输入密码，这个就是使用的`placeholder`属性。
微信小程序中的ios兼容性问题
03-29
3.微信小程序中解决ios中new Date() 时间格式不兼容 在实现倒计时，根据后台返回的时间格式转换时，后台返回了时间格式为”2018-11-12 11:12:11”，然后利用new Date() 转换时，ios中无法展示，安卓中显示正常 let ...
微信小程序中遇到的iOS兼容性问题小结
12-12
在微信小程序的`wxss`中，若想隐藏滚动条，可以使用Webkit私有选择器`::-webkit-scrollbar`来设置滚动条宽度为0，颜色透明，从而达到隐藏效果： ```css ::-webkit-scrollbar { width: 0; height: 0; color: ...
输入框设置placeholder的文字居中
weixin_43167662的博客
06-29 2108
input class='login-form-pwd' placeholder='请输入商家登录密码' placeholder-class="center"></input>
【微信小程序踩雷记录】input的placeholder无法居中
m0_54397917的博客
04-26 996
placeholder可以看作一个容器，也是要设置宽度的，设置完 float: left; text-align: center; width: 700rpx; 就好 .container-run .address .placeholder-style { float: left; text-align: center; width: 700rpx; } ...
微信小程序input搜索框，placeholder的位置和光标的位置
weixin_37787294的博客
08-02 1万+
如图： 光标的位置直接在input下设置 input{ width: 100%; height: 60rpx; background-color: white; font-size: 24rpx; text-align: center;//光标居中 } “搜索“两字的位置有两种方式： 1.placeholder-class //wxml <inp...
【小程序】input输入框属性及上下左右居中的示例（图文+代码）
【敦厚的曹操】的专栏
07-15 7789
input输入框属性说明及示例（图文+代码）
[css]placeholder在iOS下不垂直居中的解决方案
saeko49的博客
08-14 1002
设置placeholder样式需要针对不同浏览器分别写三条（写在一起不行） .wrapper input::-webkit-input-placeholder { color: #ff0000; } .wrapper input::-moz-placeholder { color: #ff0000; } .wrapper input:-ms-input-placeholder { color: #ff0000; } placeholder在iOS下存在bug，input:tex
关于微信小程序 textarea 设置text-align:center；时表现异常--已经解决
duan_mu_lian_jin的博客
01-09 2978
textarea 设置text-align:center
微信小程序中placeholder的样式
纠缠AI的亮子
04-28 2万+
通常，现代浏览器大多支持::placeholder选择器，用于设置placeholder的样式，但是在微信小程序中并不支持这种方式，而是提供了一个专门的属性（placeholder-class）来处理其样式。例如，在模版文件中这样写： &lt;input placeholder-class="place-holder" class="input-text" name="username" plac...
微信小程序input控件
Dax1_的博客
09-25 2422
首先主页面中将登录的样式进行了简单展示和使用，代码如下： <!--如果在同一个form表单中创建了多个input输入框，可以给给每个输入框， 创建自己的name=“userName”属性，可以区别哪个输入框，并通过添加 属性提交：bindsubmit="方法名" 重置：bindreset="方法名"， 达到清除输入框内容的目的 js文件中的用法，e.detail.value.userName.length--> <view class="itemView">用户名： &lt.
微信小程序-自定义placeholder颜色和样式
热门推荐
怪力马猴烧酒的博客
07-01 6万+
自定义placeholder颜色和样式 如图，这是微信小程序input组件的官方文档描述，下图红框里的placeholder-style和placeholder-class就是微信小程序里用来给placeholder设置样式的属性。 一、使用placeholder-style设置样式 placeholder-style相当于在标签的style属性，可直接在标签内设置。 用法： &amp;...
微信 小程序搜索框居中
最新发布
06-06
### 微信小程序搜索框居中布局实现方式 在微信小程序中实现搜索框的居中布局，可以通过使用 `flex` 布局来完成。以下是一个完整的实现方案： #### 1. 父容器设置 `flex` 居中 父容器需要设置为 `display: flex`，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值