uni-app input样式height无效

uni-app input样式height无效

开发环境 版本号 项目创建方式
HBuilderX 1.2.1
41 回复

关于 input 组件设置高度不生效的问题：input 组件上有默认的 min-height 属性，要一起修改，如果 min-height 的值大于 height 那么高度以 min-height 为准。（相关知识点：https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height）

更多关于uni-app input样式height无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题从uni出生到现在都没改，我认为是官方没有能力修改那几行样式，或者他们的电脑坏了

这个问题还没有解决,顶起来

input 框外面加一层view，设置view的高度，用flex布局垂直居中对齐，设置超出隐藏
<view class="search-input">
<input class="input-controller" type="text" />
<button class=“btn-search” @click=“getList”><text class="cuIcon-search icon-search"></text></button>
</view> .search-input {
display: flex;
align-items: center;
height: 50px;
padding: 12px 13px;
border-radius: 5px;
}
.input-controller {
flex: 1;
}

这个问题还没有解决大家顶起来啊

现在input想去设置背景色没门，丑死了，高度没法缩小，容器稍小一点全溢出去了，这么久了，这个问题能解决不了？

这个input组件确实没办法设置高度，建议官方去掉input组件的样式，让用户自定义

这个问题对于开发 PC或者H5的小伙伴来说,简直就是灾难性的… 为什么要预设一个固定高度呢? 可以设置PC端不显示呀. 希望uniapp官方可以帮我们解决这个问题.

官方难道看不到这个帖子吗？为什么不回一句呢？不回也好，那你倒是默默的把input的内联样式的最低高度去掉啊！整整一年了！！！

同样遇到类似问题。。。坐等解释或者更新

uni-input { height: 112upx; line-height: 112upx; div{ height: inherit; } }

这么大的bug，我 在 群里 @ 官方各位管理，没有人回应啊！ 估计官方解决不了

这不是bug吗， 就应该这样？

高度是有，但是都是固定的，审查元素里有个element.style { height: 22.3906px; line-height: 22.3906px; color: rgb(255, 255, 0); }。不管我写的多少值，他都是这个数。 这不是我想要的高度

回复 3***@qq.com:uni-app 我知道input组件的高度问题解决方案,在input外部嵌套一层view,然后input设置很高就可以了’

@mail@95jw.cn:你试试把input背景色改一下，看看变成神马样子

请提供一下测试demo，这边测试的结果只是 H5 上浏览器的光标高度不太一样，组件的高度是正确的。

应该是有最小高度。我在1440的浏览器上面 element.style { height: 98px; line-height: 98px; color: rgb(0, 0, 0); }。最小高度是98 .如果我写的小于98都是98. 大于98就按我写的

一个input98px高度。 很好看么

回复 3***@qq.com:我测试的是50px和100px，以及你提到的98px，都是预期高度。

回复 3***@qq.com:切换成手机模拟器，并不会适配PC的大屏浏览器。

手机上，input组件的高度没法缩小（似乎有最小高度，大概一指宽）。如果没有背景色或边框，从布局上看不出来什么，但加上边框和背景色，您再看看成什么样了？

顶起来.

没有解决

强列建议官方的/src/core/view/components/input/index.vue的第173~181行代码不要设置input及里面的元素高度，用户自已定义就行了哇。。。

我也遇到类似问题，input在初始化时如果是隐藏的，结果计算出placeholder的height=0 line-height=0，我都赋值高度了还被改成0，建议官方高度由用户自己定义，不要把我改了

这个输入框搞死我了，高度死活自定义不了

直接给input加上一个类名，通过类名去设置高度和行高好像能行

这个该死的问题，我倒是一直觉得我css还不够纯熟……但也没有这样打击人的。

对于h5的话，我用这个代码就可以操作uni-input里的input元素
input div, input div * { min-height: 0; height: 100% !important; line-height: 100% !important; }

input的样式也无法覆盖 uni-input { height: inherit !important; min-height: 40px !important; border: 1px solid red; }
uni-input>div { min-height: inherit !important; }
uni-input>div>input { height: 40px !important; line-height: 40px !important; min-height: 40px !important; }
uni-input>div>div { min-height: 40px !important; font-size: 14px; }
uni-input, uni-input input { font-family: UICTFontTextStyleBody; min-height: 40px !important; }

uni-input, uni-input *{ font-family:PingFangSC-Regular !important; height:inherit; min-height:14px !important; } 试过能改

height: 50px; minhight: 50px; 这两个样式同时使用可改高度，再把改为flex布局，把显示的内容上下居中

height: 50px; minhight: 50px; 这两个样式同时使用可改高度，再把改为flex布局，把显示的内容上下居中

height: 50px; minhight: 50px; 这两个样式同时使用可改高度，再把改为flex布局，把显示的内容上下居中

height: 50px; minhight: 50px; 这两个样式同时使用可改高度，再把改为flex布局，把显示的内容上下居中

我也 出现这个问题，H5端审查发现 input高度控制不生效，而uni-input 确实是我设置的尺寸，子元素input就不是。

使用less，/deep/ 穿透 .text是我input 的class ，强制选择下面的 所有元素 .text { width: 100%; position: absolute; z-index: 2; left: 0; box-sizing: border-box; /deep/ { height:10upx!impotant; （这里必须加important。因为他是行内元素） position: absolute; width: 100%; left: 0; padding-left: 180upx; box-sizing: border-box; } } 我是这样改的。。目前没找到很好的办法。。。。这个有问题点恶心

/deep/ 后面有个 星号没显示出来，就是小键盘减号旁边的那个

参考最佳回复

在uni-app中，input组件的高度设置确实有一些需要注意的地方。以下是解决方案：

  1. 使用padding替代height：
.input-class {
  padding: 20rpx 0;
}
  1. 如果需要精确控制高度，可以配合line-height使用：
.input-class {
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 10rpx;
}
  1. 对于H5平台，可以尝试添加box-sizing：
.input-class {
  box-sizing: border-box;
  height: 60rpx;
}
  1. 如果使用uni-ui的input组件，建议通过props设置高度：
<uni-easyinput type="text" :styles="{height:'60rpx'}"></uni-easyinput>
回到顶部