Изменить высоту поля ввода формы - PullRequest
Новая
       111

Изменить высоту поля ввода формы

0 голосов
/ 06 августа 2020

Я хотел бы отрегулировать высоту поля ввода формы и сделать так, чтобы текст почти касался верхней и нижней границ поля. Я пробовал добавить css, но безуспешно. Я ищу решение bootstrap css. 

.form-group {
  height: 10px;
  width: 30%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <div class="form-group">
      <label for="input">First Name</label>
      <input class="form-control" type="text" name="input" placeholder="Enter text">
    </div>

Другими словами (или изображениями), я хочу изменить это

enter image description here

to this:

введите описание изображения здесь

Ответы [ 2 ]

2 голосов
/ 06 августа 2020

Используя только Bootstrap, лучше всего будет:

Bootstrap v3

Bootstrap v4

Отсюда вы можете вручную отрегулировать отступы, чтобы уменьшить промежуток между верх / низ букв с границей поля ввода.

Bootstrap v4: https://getbootstrap.com/docs/4.5/utilities/spacing/

Bootstrap v3: у вас будет использовать заполнение CSS в элементе <input> для настройки.

1 голос
/ 06 августа 2020

Я бы использовал рекомендованное bootstrap решение и переопределил $ input-height переменную в моем custom.s css, например: 

$input-height: 1rem;

(переопределение bootstrap переменные: https://getbootstrap.com/docs/4.0/getting-started/theming/)

...