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

最新推荐文章于 2025-07-18 18:32:05 发布

luck-cheng

最新推荐文章于 2025-07-18 18:32:05 发布

阅读量1.7w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_20032995/article/details/79804825

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用WXML和WSS实现输入框占位符文字居中的方法。通过为占位符设置特定的样式类，并在WSS文件中定义该类的样式属性，实现了占位符的居中显示。

直接上代码

wxml

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

wss

.center{
    text-align: center;
}

效果

这里写图片描述

思路

也就是单独为placeholder设置了一个class，然后wss对这个class所对应的元素（placeholder-class对应的元素就是placeholder）定义样式；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

luck-cheng

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序-页面开发

陆卿之的博客

01-02

4085

页面开发

踩坑之路——微信小程序textarea中placeholder居中问题

weixin_42556039的博客

09-11

1万+

我们可以看到 textarea 可以设置line-height并呈现但placeholder占位符文字却没有，设置placeholder-class、placeholder-style也不可以？？没有思路，我就想小程序的文档案例应该有法子，但没想到官方案例是这样子做的案例？？？看来是莫得法子了，只能用官方案例中的方法了 ...

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

小程序input的placeholder不垂直居中的问题解决

qq_43437571的博客

08-26

4392

placeholder不垂直居中

小程序 UI 魔法：解密 placeholder-style，让你的输入框“会说话”！

最新发布

小丁的博客

07-18

966

本文深入解析了微信小程序中placeholder-style属性的作用与用法。该属性专用于定制<input>和<textarea>组件的占位符文本样式，通过内联CSS实现视觉定制。文章采用流程图、时序图等多种可视化方式，生动展示了placeholder-style的渲染机制和优先级规则（高于placeholder-class）。通过实际案例演示如何将占位符设计为"推荐默认值"的样式，提升用户体验。最后用状态图、类图等深入剖析了小程序组件的样式系统架构。

placeholder文字居中

qq_36349264的博客

05-17

3911

.shuru input::-webkit-input-placeholder { text-align: center; }

输入框设置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; } ...

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提示文字及按钮选中/取消状态的方法

08-28

主要介绍了微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法,涉及事件绑定及this.setData动态设置属性数据的相关操作技巧,需要的朋友可以参考下

微信小程序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输入框属性说明及示例（图文+代码）

关于微信小程序 textarea 设置text-align:center；时表现异常--已经解决

duan_mu_lian_jin的博客

01-09

2978

textarea 设置text-align:center

[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

微信小程序中placeholder的样式

纠缠AI的亮子

04-28

2万+

通常，现代浏览器大多支持::placeholder选择器，用于设置placeholder的样式，但是在微信小程序中并不支持这种方式，而是提供了一个专门的属性（placeholder-class）来处理其样式。例如，在模版文件中这样写： <input placeholder-class="place-holder" class="input-text" name="username" plac...

微信小程序input控件

Dax1_的博客

09-25

2422

首先主页面中将登录的样式进行了简单展示和使用，代码如下：  <view class="itemView">用户名： &lt.

微信小程序-自定义placeholder颜色和样式

热门推荐

怪力马猴烧酒的博客

07-01

6万+

自定义placeholder颜色和样式如图，这是微信小程序input组件的官方文档描述，下图红框里的placeholder-style和placeholder-class就是微信小程序里用来给placeholder设置样式的属性。一、使用placeholder-style设置样式 placeholder-style相当于在标签的style属性，可直接在标签内设置。用法： &...

微信小程序搜索框居中

06-06

### 微信小程序搜索框居中布局实现方式在微信小程序中实现搜索框的居中布局，可以通过使用 `flex` 布局来完成。以下是一个完整的实现方案： #### 1. 父容器设置 `flex` 居中父容器需要设置为 `display: flex`，并通过 `align-items` 和 `justify-content` 来实现子元素的垂直和水平居中[^3]。 ```css .search-container { display: flex; align-items: center; /* 子控件垂直居中 */ justify-content: center; /* 子控件水平居中 */ width: 100%; /* 占据整个屏幕宽度 */ height: 100vh; /* 占据整个屏幕高度 */ background-color: #f5f5f5; /* 背景颜色可选 */ } ``` #### 2. 搜索框样式定义搜索框作为子元素，可以设置其宽高、背景色、边框圆角等属性。同时，为了确保内容居中，可以使用 `text-align` 和 `line-height` 等属性[^1]。 ```css .search-box { width: 80%; /* 搜索框占据父容器80%的宽度 */ height: 65rpx; /* 高度设置为65rpx */ background-color: #ffffff; /* 白色背景 */ border-radius: 32rpx; /* 圆角 */ border: 1px solid #e5e5e5; /* 边框 */ display: flex; /* 使用flex布局 */ align-items: center; /* 内部内容垂直居中 */ padding: 0 20rpx; /* 设置内边距 */ } .search-box image { width: 40rpx; /* 图片宽度 */ height: 40rpx; /* 图片高度 */ margin-right: 10rpx; /* 图片与文字间距 */ } .search-box input { flex: 1; /* 文字输入框占据剩余空间 */ text-align: center; /* 文本居中 */ font-size: 28rpx; /* 字体大小 */ color: #999999; /* 文字颜色 */ } ``` #### 3. WXML 结构 WXML 文件中定义一个父容器和搜索框子组件。 ```xml <view class="search-container"> <view class="search-box"> <image src="/images/search.png"></image>  <input placeholder="请输入搜索内容" />  </view> </view> ``` ### 完整代码示例以下是完整的代码示例，包含 WXML 和 WXSS： ```xml  <view class="search-container"> <view class="search-box"> <image src="/images/search.png"></image> <input placeholder="请输入搜索内容" /> </view> </view> ``` ```css /* WXSS */ .search-container { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: #f5f5f5; } .search-box { width: 80%; height: 65rpx; background-color: #ffffff; border-radius: 32rpx; border: 1px solid #e5e5e5; display: flex; align-items: center; padding: 0 20rpx; } .search-box image { width: 40rpx; height: 40rpx; margin-right: 10rpx; } .search-box input { flex: 1; text-align: center; font-size: 28rpx; color: #999999; } ``` ### 注意事项 - 确保图片路径正确，例如 `/images/search.png`。 - 如果需要适配不同屏幕尺寸，建议使用 `rpx` 单位[^2]。 - 搜索框内部的图片和文字可以通过 `flex` 布局实现水平对齐和垂直居中。