Как исправить несогласованную высоту полей ввода HTML5? - PullRequest
Новая
       46

Как исправить несогласованную высоту полей ввода HTML5?

0 голосов
/ 08 октября 2018

Некоторые новые типы ввода, введенные в HTML5, такие как <input type="date">, выше в Google Chrome.Есть ли способ исправить несогласованную высоту без установки фиксированной высоты?

Цель состоит в том, чтобы все типы ввода, перечисленные ниже, включая кнопку отправки, имели одинаковую высоту.Основания:

  • Подберите дизайн, особенно если он расположен горизонтально.
  • Гибкость, когда мне нужно, чтобы некоторые поля ввода имели больший размер шрифта. 

$("input").each(function() {
  h = $(this).outerHeight();
  $(this).parent().append(h);
});
input {
  font: inherit;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid silver;
  padding: 0.5rem;
  margin: 0;
}

[type="search"] {
  -webkit-appearance: textfield;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input Heights</h1>
<p><input type="text" placeholder="text"></p>
<p><input type="search" placeholder="search"></p>
<p><input type="tel" placeholder="tel"></p>
<p><input type="url" placeholder="url"></p>
<p><input type="email" placeholder="email"></p>
<p><input type="datetime" placeholder="datetime"></p>
<p><input type="date" placeholder="date"></p>
<p><input type="month" placeholder="month"></p>
<p><input type="week" placeholder="week"></p>
<p><input type="time" placeholder="time"></p>
<p><input type="datetime-local" placeholder="datetime-local"></p>
<p><input type="number" placeholder="number"></p>
<!-- <p><input type="range" placeholder="range"></p> -->
<!-- <p><input type="color" placeholder="color"></p> -->
<p><input type="submit" value="submit"></p>

Ответы [ 6 ]

0 голосов
/ 17 октября 2018

Определить высоту (и отступ) в em единицах, в этом случае высота ввода будет соответствовать размеру шрифта 

$("input").each(function() {
  var span = $('<span>');
  $(this).parent().append(span);
  setInterval(() => span.text($(this).outerHeight()), 100);
});
$('#button').on('click', function(){
  $('form').css('font-size', 10 + Math.random() * 15);
});
input {
  font: inherit;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid silver;
  margin: 0;

  padding: 0.5em;
  height: 2.5em;
}

[type="search"] {
  -webkit-appearance: textfield;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input Heights</h1>
<button id="button">change font size</button>
<form>
<p><input type="text" placeholder="text"></p>
<p><input type="search" placeholder="search"></p>
<p><input type="tel" placeholder="tel"></p>
<p><input type="url" placeholder="url"></p>
<p><input type="email" placeholder="email"></p>
<p><input type="datetime" placeholder="datetime"></p>
<p><input type="date" placeholder="date"></p>
<p><input type="month" placeholder="month"></p>
<p><input type="week" placeholder="week"></p>
<p><input type="time" placeholder="time"></p>
<p><input type="datetime-local" placeholder="datetime-local"></p>
<p><input type="number" placeholder="number"></p>
<!-- <p><input type="range" placeholder="range"></p> -->
<!-- <p><input type="color" placeholder="color"></p> -->
<p><input type="submit" value="submit"></p>
</form>
0 голосов
/ 14 октября 2018

Как отметил MrLister, max-height и min-height, выраженные в em, кажутся вам лучшим выбором.Я часто использую его в производственных системах, и у меня не было никаких жалоб: 

function updateInputs() {
  $("input").each(function() {
    $('span', $(this).parent()).remove();
    $('<span />', {
      text: $(this).outerHeight()
    }).appendTo($(this).parent())
  });
}
$('#fontSizer').on('input', function() {
  $('body').css('font-size', $(this).val() + 'px');
  updateInputs();
});
$(window).on('load',updateInputs);
body {
  font-size: 16px
}

input {
  font: inherit;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid silver;
  padding: 0.5rem;
  margin: 0;
  max-height: 2.25em;
  min-height: 2.25em;
}

[type="search"] {
  -webkit-appearance: textfield;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: silver;
}

.fixed-top {
  background-color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  width: 100%;
  left: 0;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input Heights</h1>
<p><input type="text" placeholder="text"></p>
<p><input type="search" placeholder="search"></p>
<p><input type="tel" placeholder="tel"></p>
<p><input type="url" placeholder="url"></p>
<p><input type="email" placeholder="email"></p>
<p><input type="datetime" placeholder="datetime"></p>
<p><input type="date" placeholder="date"></p>
<p><input type="month" placeholder="month"></p>
<p><input type="week" placeholder="week"></p>
<p><input type="time" placeholder="time"></p>
<p><input type="datetime-local" placeholder="datetime-local"></p>
<p><input type="number" placeholder="number"></p>
<!-- <p><input type="range" placeholder="range"></p> -->
<!-- <p><input type="color" placeholder="color"></p> -->
<p><input type="submit" value="submit"></p>

<div class="fixed-top">
  <input type="range" step="0.01" id="fontSizer" max="54" min="10" value="16">
</div>

Обратите внимание, что ползунок диапазона изменяет только font-size на <body> (и обновляет отображаемый размер соответственно).

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

:root {
  --input-padding: 0.5rem;
}
input {
  padding: calc(var(--input-padding) + .1475em) var(--input-padding);
  line-height: 1.225em
}
input[type="date" i], input[type="datetime-local" i], input[type="month" i], input[type="time" i], input[type="week" i] {
  padding: var(--input-padding)
}


function updateInputs() {
  $("input").each(function() {
    $('span', $(this).parent()).remove();
    $('<span />', {
      text: $(this).outerHeight()
    }).appendTo($(this).parent())
  });
}
$('#fontSizer').on('input', function() {
  $('body').css('font-size', $(this).val() + 'px');
  updateInputs();
});
$(window).on('load',updateInputs);
body {
  font-size: 16px
}
input {
  font: inherit;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid silver;
  margin: 0;
}

[type="search"] {
  -webkit-appearance: textfield;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: silver;
}

.fixed-top {
  background-color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  width: 100%;
  left: 0;
  position: fixed;
}
:root {
  --input-padding: 0.5rem;
}
input {
  padding: calc(var(--input-padding) + .1475em) var(--input-padding);
  line-height: 1.225em
}
input[type="date" i], input[type="datetime-local" i], input[type="month" i], input[type="time" i], input[type="week" i] {
  padding: var(--input-padding)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input Heights</h1>
<p><input type="text" placeholder="text"></p>
<p><input type="search" placeholder="search"></p>
<p><input type="tel" placeholder="tel"></p>
<p><input type="url" placeholder="url"></p>
<p><input type="email" placeholder="email"></p>
<p><input type="datetime" placeholder="datetime"></p>
<p><input type="date" placeholder="date"></p>
<p><input type="month" placeholder="month"></p>
<p><input type="week" placeholder="week"></p>
<p><input type="time" placeholder="time"></p>
<p><input type="datetime-local" placeholder="datetime-local"></p>
<p><input type="number" placeholder="number"></p>
<!-- <p><input type="range" placeholder="range"></p> -->
<!-- <p><input type="color" placeholder="color"></p> -->
<p><input type="submit" value="submit"></p>

<div class="fixed-top">
  <input type="range" step="0.01" id="fontSizer" max="54" min="10" value="16">
</div>

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

0 голосов
/ 12 октября 2018

Удалите все вертикальные отступы и добавьте max-height Затем замените вертикальные отступы на line-height (убедитесь, что вы указали единицы измерения, в процентах пустое).

Все это в сочетании с box-sizing: border-box исправитбольшинство входов.

Теперь тип ввода submit и действительное значение <button> являются единственной проблемой.Текст вертикально выровнен по низу.Я не могу изменить это.Я считаю, что это проблема со стилем браузера по умолчанию для этих элементов, НО appearance: none, похоже, не помогает.

Возможно, кто-то может улучшить это? 

$("input").each(function() {
  h = $(this).outerHeight();
  $(this).parent().append(h);
});
input, button {
  font: inherit;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid silver;
  padding: 0;
  margin: 0;
  line-height: 50px;
  max-height: 36px;
}

[type="search"] {
  -webkit-appearance: textfield;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input Heights</h1>
<p><input type="text" placeholder="text"></p>
<p><input type="search" placeholder="search"></p>
<p><input type="tel" placeholder="tel"></p>
<p><input type="url" placeholder="url"></p>
<p><input type="email" placeholder="email"></p>
<p><input type="datetime" placeholder="datetime"></p>
<p><input type="date" placeholder="date"></p>
<p><input type="month" placeholder="month"></p>
<p><input type="week" placeholder="week"></p>
<p><input type="time" placeholder="time"></p>
<p><input type="datetime-local" placeholder="datetime-local"></p>
<p><input type="number" placeholder="number"></p>
<!-- <p><input type="range" placeholder="range"></p> -->
<!-- <p><input type="color" placeholder="color"></p> -->
<p><input type="submit" value="submit"></p>
<p><button>submit</button>
0 голосов
/ 12 октября 2018

Проблема, похоже, связана со стрелками, добавленными Chrome к вводу даты:

enter image description here

Эти стрелки выше текста, из которогоВесь вход выше другого.Они также обрабатываются как текст, поэтому на них влияют font-size и line-height, что делает его немного хитрым.

Идея состоит в том, чтобы применить min-height к области содержимого всех входов в порядкечтобы соответствовать высоте этих стрелок.После нескольких тестов мы можем иметь равную высоту, если мы установим min-height:1.5em и сделаем box-sizing:content-box.Использование content-box гарантирует, что высота не уменьшится для других входных данных. 

$("input").each(function() {
  h = $(this).outerHeight();
  $(this).parent().append(h);
});
input {
  font: inherit;
  vertical-align: middle;
  border: 1px solid silver;
  padding: 0.5rem;
  margin: 0;
  display:inline-block;
  min-height: 1.5em;
  box-sizing:content-box;
}

[type="search"] {
  -webkit-appearance: textfield;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: silver;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Input Heights</h1>
<p><input type="text" placeholder="text"></p>
<p><input type="search" placeholder="search"></p>
<p><input type="tel" placeholder="tel"></p>
<p><input type="url" placeholder="url"></p>
<p><input type="email" placeholder="email"></p>
<p><input type="datetime" placeholder="datetime"></p>
<p><input type="date" placeholder="date"></p>
<p><input type="month" placeholder="month"></p>
<p><input type="week" placeholder="week"></p>
<p><input type="time" placeholder="time"></p>
<p><input type="datetime-local" placeholder="datetime-local"></p>
<p><input type="number" placeholder="number"></p>
<!-- <p><input type="range" placeholder="range"></p> -->
<!-- <p><input type="color" placeholder="color"></p> -->
<p><input type="submit" value="submit"></p>

Затем мы можем настроить padding, font-size, height и т. Д., И они всегда будут иметь одинаковую высоту: 

input {
  font: inherit;
  vertical-align: middle;
  border: 1px solid silver;
  padding: 0.5rem;
  margin: 0;
  display:inline-block;
  min-height: 1.5em;
  box-sizing:content-box;
}
.big input{
   padding:20px;
}
.small input{
   padding:2px;
}
.h-big input{
   height:50px;
}
.h-small input{
   height:10px;
}
<p><input type="text" placeholder="text"><input type="date" placeholder="date"></p>
<p style="font-size:25px;"><input type="text" placeholder="text"><input type="date" placeholder="date"></p>
<p style="font-size:10px;"><input type="text" placeholder="text"><input type="date" placeholder="date"></p>

<p class="big"><input type="text" placeholder="text"><input type="date" placeholder="date"></p>
<p class="small"><input type="text" placeholder="text"><input type="date" placeholder="date"></p>

<p class="h-big"><input type="text" placeholder="text"><input type="date" placeholder="date"></p>
<p class="h-small"><input type="text" placeholder="text"><input type="date" placeholder="date"></p>
0 голосов
/ 08 октября 2018

Вам нужно не только установить высоту элемента, но и размер шрифта 

input{
    height: 1em;
    font-family: Arial;
    font-size: 1em;
    font-size-adjust: 1;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

Пример скрипта: https://jsfiddle.net/rahulsalvi2k7/50otuem2/

0 голосов
/ 08 октября 2018

Вы можете установить высоту строки: 

input {
  vertical-align: top;
  line-height: 22px;
}
<input type="text">
<input type="date">
...