CODEWITHSUNDEEP
cssbootstrap-5
robtot
robtot

Reputation: 1031

Bootstrap 5: Change caret height of input fields (form-control)

I want to change the height of an input field (form-control) in Bootstrap 5. Any ideas how to solve this? An example to make it higher and shorter is appreciated :)

enter image description here

Example code:

<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>

Upvotes: 0

Views: 2565

Answers (2)

Jair Manosalva
Jair Manosalva

Reputation: 1

handle the height depending on your input:

  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="[email protected]">
</div>

Upvotes: 0

Julia
Julia

Reputation: 71

You could make it higher or lower by adjusting padding or line-height to the input field.

input {
    padding: 3px 5px;
}

or

input {
    line-height: 25px;
}

Upvotes: 1

Related Questions