如何使输入高度更小？离子2答案

【问题标题】：How to make inputs height smaller? Ionic2如何使输入高度更小？离子2
【发布时间】：2017-12-01 17:56:48
【问题描述】：

通常我对任何组件的样式设置都没有任何问题，但我找不到使文本输入高度更小的方法，有什么办法吗？

  <ion-item class="username">
     <ion-input></ion-input>
  </ion-item>

还有css：

.username{
  max-height: something;
  height: something;
}

width 属性工作正常，但我无法设置高度

我也尝试直接修改输入属性，比如：

.text-input{
height: something
}

或

.text-input-md {
height: something
}

我已经编辑了输入的每个属性以使其更小，但没有一个有效，就像它卡在某个大小上一样。

【问题讨论】：

【解决方案1】：

您需要定位输入，因为ion-input 稍后会生成一个输入标签，因此您可以简单地执行此操作：

.username input{
  max-height: something;
  height: something;
}

你也可以通过这样做更具体

.username input.text-input{
  max-height: something;
  height: something;
}

顺便说一句，不要忘记填充和字体大小。如果您想缩小高度，请尝试减少它们。

【讨论】：

@AnotherChris，我在答案中添加了更多信息，以便同时考虑填充和字体大小
在 ionic4 全局导入 theme/common.scss 时，此方法有效。但是当它在本地导入 components/username.scss 时，这不起作用。你知道为什么吗？

【解决方案2】：

如果您使用的是引导程序，那么您可以使用

<div class="form-group">
    <label for="inputsm">Small input</label>
    <input class="form-control input-sm" id="inputsm" type="text">
</div>

或者，在 css 中使用以下代码

input[type=text] {height: 60px;}

【讨论】：