微信小程序 input控件高宽设置

最新推荐文章于 2025-07-04 15:19:03 发布

置顶

小左爱编程

最新推荐文章于 2025-07-04 15:19:03 发布

阅读量3.5w

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/qq_36797992/article/details/82769100

本文介绍了在微信小程序中遇到input控件高度设置不生效的问题，详细解析了原因在于需要同时覆盖官方设置的高度和最小高度(min-height)。通过设置指定像素值而非百分比，解决了宽度调整的问题。

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

微信小程序 input控件高宽设置

在微信小程序中，很多控件设置了感觉没有变化，最近做项目时，遇到了input控件的宽高难以设置问题。

wxml
 <input class='input-radius'  placeholder='请输入项目名称' placeholder-class='iconfont icon-sousuo mid-font '   placeholder-style='color:#999999;font-size:14px'  />
 <view style='height:20px;font-size:14px;color:#999999;margin:2px 10px;border-radius:3px;border:thin solid #eee' >搜索</view>

js
.input-radius{
  border-radius: 15px;
  margin: 0 0 3px 18px;
  width: 270px;
}

这里我没有设置高度所以显示的是控件自身的高度。
在这里插入图片描述

字体我设置的为10px；如果设置input height：10px；生效会很明显看出来，但是结果却没有变化。
在这里插入图片描述

后来我通过小程序视图选择，找到了微信小程序input控件原始设置。
在这里插入图片描述
上图发现：我只覆盖了官方input的height，而没有覆盖min-height;

js
.input-

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小左爱编程

关注关注

1
点赞
踩
16

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【微信小程序开发（4）---demo.wxss的view{ }宽、高设置以及公式换算】

追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光

01-03

1317

app.json中已经配置 { "pages":[ "pages/demo05/demo05" ] } demo05.wxss view{ /* width: 200rpx; */ height: 200rpx; font-size: 40rpx; background-color:aqua; /*以下代码写法错误 */ /* width:750 rpx *100 / 375 ; */ width:calc(750rpx *100 / 375 ); } 学习笔记

Spine2D骨骼动画播放器 - 微信小程序版

灵台方寸山斜月三星洞

09-07

3646

Spine2D骨骼动画播放器-微信小程序版。由于官方并没有提供现成的运行库，只能自己改造。设计目的，方便 Spine 用户直接通过`微信小程序`预览动画。

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

微信小程序之input调整

qq_45911550的博客

09-20

1114

参考链接 1、wxml代码 <view class="getinput"> <view class="the_first"> <input name="suibian" class="password" auto-focus placeholder="请输入"/> </view> </view> 2、wxss代码 .getinput{ border:1px solid gray; margin:100px;

微信小程序input组件宽度无法改变

少油少盐不要辣

03-02

8766

input组件有个默认的宽高，在使用flex布局的时候，发现会影响到页面的布局，就是无法修改其宽度了。若要修改input组件的宽度，最好不要让它处在flex布局当中。 ...

微信小程序表单控件完整实战指南

最新发布

weixin_42603332的博客

07-04

725

日历组件的核心功能不仅包括基础的日期选择，还涵盖了日期范围选择、节假日高亮、动态事件展示等。支持单个或多个日期的选择，以及通过预设规则配置特殊日期。在数据同步上，组件能够高效地与后端系统通信，确保选中的日期信息准确无误地被处理和存储。在开发微信小程序时，组件样式经常需要根据页面的具体需求进行调整和定制。微信小程序采用了类似Web开发的scoped的概念，通过wxss来实现样式的局部作用域。当定义组件样式时，微信小程序默认会将这些样式应用于组件内的所有内容，而不会影响到外部的布局。

微信小程序input高度问题及placeholder与input的高度冲突问题

weixin_43421060的博客

01-11

5706

微信小程序input高度问题及placeholder与input的高度冲突问题大家在用到input组件的时候肯定有这个问题，为什么input的高度不能调低，为什么placeholder的光标突出了input的高度。下面来跟大家说下一、input高度问题 input有一个属性min-height,他默认是1.6rem，只要把他改了，height属性就会改的 .input{ height：20...

关于小程序Input的高度问题

qq_37473645的博客

11-12

2010

背景：采用taro开发小程序中，需要开发一个可以➕，➖，也可手动输入的计数器，如图所示问题：Image和Input所给的height和border都是40px、1px，但在各个机型下Input都比Image的高度高一点，如图所示解决过程：刚开始猜想是否是小程序中图片比实际像素小了2px，将图片高度增大，肉眼看起来在一下屏幕较大的手机上确实变得对齐了，但是在屏幕较小的手机上又回到了之前的样子，此时将Input的高度增加发现是能增加的，高度减小确不能实现，此时猜想Input组件是否有...

记录微信小程序修改input高度的坑

qq_20352713的博客

08-11

2014

首先来修改input的高度查看一下input的样式,直接修改height还是不够的,还需要修改min-height .custom-input-class{ width:100rpx; text-align: right; color:#FCC847; font-size:24rpx; height:30rpx; min-height:30rpx; } 修改了高度还会有光标超出的问题,顺便把placeholder-class一起设置了 .custom-input-p

微信小程序-微信小程序图片自适应,微信小程序富文本解析

08-07

> 最近跟小伙伴一起开发微信小程序, 发现在内容显示这块没法很好的解析。所以记录了下查看效果下载项目，在小程序工具新建项目选择开发文件夹。注意：新建项目不使用appId, 在项目配置中勾选：开发环境不校验...

微信小程序-二维码绘制

2302_80798583的博客

02-22

2078

【代码】微信小程序-二维码绘制。

微信小程序实现自定义input输入框

苏苏就是小苏苏的博客

11-15

1万+

1.实现效果 2.实现原理 1.微信小程序的input不支持letter-spacing的属性 2.将input的宽度设置成250%（注意，父元素需要设置overflow：hidden，否则在苹果手机上将出现滑动），并设置absolute定位将input输入框定位出当前页面。 3.将input输入的值用absolute定位到4个框框里面，设置letter-spacing将文字隔开。 3.实现代码 /* pages/subPack/customIpt/index.wxss */ .dialog_pop03

输入框（input）的宽度根据内容自适应

qq_25775675的博客

09-12

7111

通过使用CSS的width属性和一些JavaScript来完成input宽度自适应。

页面上input输入框宽度实现自动调整

欢迎大家交流前端开发技术、经验及各种知识沉淀

09-22

1万+

input输入框宽度实现自动调整，本文介绍两种方式，一是通过获取input**内容的宽度**实现输入框宽度的自动调整；二是通过内容字符串的长度乘以文本字体大小的积，来实现输入框宽度的自动调整。

Vue实现input宽度随文字长度自适应

weixin_46711427的博客

06-22

620

业务需求，输入文字，后面的元要紧随其后，奈何input默认是有宽度，我想要达到，输入文字，动态改变input的宽度,试了很多方法，目前自己琢磨一种，有遇到问题的可以参考一下，直接贴代码 <div class="textcontain"> <input type="text" v-model.number="item.cardComboMoney" maxlength="5" .

微信小程序创建输入框

该用户还没想到好的昵称的博客

06-28

5263

微信小程序开发初学：输入框 - input

热门推荐

Dae_Lzh的博客

01-27

1万+

输入框。 input具有的属性 value 类型：String 默认值：无输入框内的初始内容 type 类型：String 默认值：text 输入内容的类型 type属性的合法值（1）text：输入文本（2）number：输入数字（弹出数字键盘）（3）idcard：输入身份证（弹出身份证输入键盘） password 类型：boolean 默认值：false 是否为密码类型（输入内容显示为圆点） placeholder 类型：String 默认值：无提示词 placeholder-class 类型：

微信小程序设置input框placeholder的字体大小

qq_59076775的博客

07-10

5750

微信小程序修改placher的值

微信小程序-textarea文本域输入限制大小

LittleStar_Sun的博客

04-14

1624

效果图：若输入文字超过10字时，提示“已达上限”，并且不能再输入文字： .wxml文件中： <view class="content"> <textarea placeholder='请输入不少于{{min}}个字的描述' minlength="{{min}}" maxlength="{{max}}" bindinput="bindWordLimit" value="{{textVal}}"> </textarea> <view c

微信小程序开发如何知道指定平板的高宽

12-06

在微信小程序开发中，可以通过以下几种方法来获取指定设备的屏幕高宽： 1. 使用 `wx.getSystemInfo` 或 `wx.getSystemInfoSync` 方法：这些方法可以获取系统的信息，包括屏幕的宽度和高度。 ```javascript // 异步获取 wx.getSystemInfo({ success: function(res) { console.log(res.windowWidth); // 屏幕宽度 console.log(res.windowHeight); // 屏幕高度 } }); // 同步获取 try { const res = wx.getSystemInfoSync(); console.log(res.windowWidth); // 屏幕宽度 console.log(res.windowHeight); // 屏幕高度 } catch (e) { // 处理错误 } ``` 2. 使用 `wx.onWindowResize` 方法：该方法可以监听窗口尺寸变化事件，从而动态获取屏幕的高宽。 ```javascript wx.onWindowResize(function(res) { console.log(res.windowWidth); // 屏幕宽度 console.log(res.windowHeight); // 屏幕高度 }); ``` 3. 在 WXML 文件中使用内联样式：可以通过内联样式直接使用 `{{windowWidth}}` 和 `{{windowHeight}}` 来动态设置组件的宽高。 ```html <view style="width: {{windowWidth}}px; height: {{windowHeight}}px;">  </view> ``` 然后在对应的 JS 文件中： ```javascript Page({ data: { windowWidth: 0, windowHeight: 0 }, onLoad: function() { const that = this; wx.getSystemInfo({ success: function(res) { that.setData({ windowWidth: res.windowWidth, windowHeight: res.windowHeight }); } }); } }); ``` 这些方法可以帮助你在微信小程序开发中获取到指定设备的屏幕高宽，从而进行相应的布局和样式调整。