如何解决 HTML5 输入框高度不一致的问题？

Posted

技术标签:

【中文标题】如何解决 HTML5 输入框高度不一致的问题？【英文标题】：How to fix inconsistent height of HTML5 input boxes? 【发布时间】：2019-03-13 04:36:49 【问题描述】：

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>

【问题讨论】：

min-height:1em; max-height:1em; 怎么样，还是作弊？ 指定输入元素的高度和内边距，使它们都具有相同的高度 input[type='date'] padding-top:4px; 【参考方案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>

【讨论】：

【参考方案2】：

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

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/

【讨论】：

【参考方案3】：

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

请注意，范围滑块仅更改 &lt;body&gt; 上的 font-size（并相应地更新显示的大小）。

一种完全不同的方法是增加普通的填充值，使它们达到与具有微调器的相同的大小。我最接近体面的东西是

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

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

【讨论】：

两个小问题：chrome 添加的箭头对齐混乱，当我们想要添加填充时，内容高度将变为技术上 0（顺便说一句，视觉上这不是问题) 箭头的对齐是一个完全不同的问题，@Temani。它不是由 Chrome 自己修复的。我应该如何以及为什么要在这个答案中解决它？问题清楚地表明：所有输入的高度相等。这就是我的全部答案。微调器的位置可以通过隐藏它们跨浏览器并自己绘制来修复。它们在不同的浏览器中绘制quite differently。 在您应用最大高度之前对齐很好，这就是我评论的原因.. 我不是在讨论以前未修复的问题，而是在您的代码中出现的问题。 @Temani，你是对的。幸运的是，大多数网页对所有输入都使用一种尺寸，因此可以仅针对该尺寸固定对齐方式。【参考方案4】：

删除所有垂直填充并添加max-height 然后将垂直填充替换为line-height（确保指定单位，空白为百分比）。

所有这些结合box-sizing: border-box 将修复大部分输入。

现在，输入类型 submit 和真正的 &lt;button&gt; 是唯一的问题。文本与底部垂直对齐。我似乎无法改变它。我认为这些元素的默认浏览器样式存在问题，但 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>

【讨论】：

这里的重点是允许各种字体大小和所有输入具有相同的高度，同时让原生微调按钮垂直居中。 px 不会让你走得太远。 看代码。它使用可变字体大小。像素设置是强制行高和容器高度。这些允许框按您的要求保持固定 把body font-size: 60px放到你的CSS中看看会发生什么。【参考方案5】：

问题似乎与 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>

【讨论】：

看起来很有希望，不知道我们是否可以保留边界框，似乎可以。 @Stickers 我们可以保留它，但在某些情况下它会失败.. 尝试放入第二个 sn-p 的示例，你会看到......我们必须更改边框框最小高度值始终具有相同的高度。 如果没有边框，它会使其他事情变得非常复杂。我想这根本不可能，你的已经非常接近了。让我们拭目以待。 @Stickers 带有边框框，我们必须始终调整最小高度，这在某些情况下也很复杂。我们可能会使用calc 引入 CSS 变量和一些复杂的计算，但不确定是否值得这样做......对于不赞成票，他们可能是针对最初的问题，不清楚您的目标是 Chrome，所以 FF 用户没有发现任何问题。【参考方案6】：

你可以设置行高：

input 
  vertical-align: top;
  line-height: 22px;

<input type="text">
<input type="date">

【讨论】：

只要对输入应用一些填充，它就会停止工作。

以上是关于如何解决 HTML5 输入框高度不一致的问题？的主要内容，如果未能解决你的问题，请参考以下文章

ios兼容性

怎样用jquery实现输入框只能输入大于零的数字？ 两个输入框一个是宽度，一个是高度

如何获得 html5 文件输入以在浏览器中一致地接受某些文件类型？

iOS webview html5 移动端 软键盘弹起遮挡输入框

如何解决 Python 中的“ValueError：找到样本数量不一致的输入变量”问题

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题