如何修复HTML5输入框高度不一致的问题？

问题描述 投票：0回答：7

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>

html css google-chrome html-input
7个回答
11
投票

该问题似乎与 Chrome 添加到日期输入的箭头有关：

这些箭头比文本高，使得整个输入比另一个更高。它们也被视为文本，因此会受到 

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>

2
投票

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

但是，它并不完美。这些错误不是线性的，我怀疑涉及一些舍入。有时它在上面，有时在下面。

1
投票

您可以设置行高：

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

1
投票

以

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

删除任何垂直内边距并添加 

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

这对我有用：

input {
  height:100%
}
<input type="text">
<input type="date">

-1
投票

您不仅需要设置元素高度，还需要设置字体大小

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/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.