Bootstrap 5：更改输入字段的插入高度（表单控件）答案

【问题标题】：Bootstrap 5: Change caret height of input fields (form-control)Bootstrap 5：更改输入字段的插入高度（表单控件）
【发布时间】：2022-07-16 03:55:55
【问题描述】：

我想在 Bootstrap 5 中更改输入字段（表单控件）的高度。任何想法如何解决这个问题？一个让它更高更短的例子值得赞赏:)

示例代码：

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

【问题讨论】：

#exampleInputEmail1 { line-height: 50px; }

标签： css bootstrap-5

【解决方案1】：

您可以通过调整输入字段的填充或行高来使其更高或更低。

input {
    padding: 3px 5px;
}

或

input {
    line-height: 25px;
}

【讨论】：

【解决方案2】：

根据您的输入处理高度：

  input[type="text"],
  input[type="password"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  textarea.form-custom-field {
    line-height: 1.4rem;
  }

<div class="mb-3">
  <input type="email" class="form-control" id="FormInput" placeholder="name@example.com">
</div>

【讨论】：