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

  显示原文与译文双语对照的内容
92 2

HTML5引入的一些新输入类型,如 <input type="date">,在 Google Chrome 中的高度更高。 是否可以在不设置固定高度的情况下修复不一致的高度?

目标是使所有输入类型列出 below,包括提交按钮都具有相同的高度。 原因:1.匹配设计,尤其是在水平布局时。 2.当我需要一些输入框具有较大的字体大小时,可以灵活使用。


$("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>
时间: 原作者:

78 0

问题似乎与 Chrome 向日期输入中添加的箭头相关:

enter image description here

这些箭头比使整个输入高的文本更高。 它们也被视为文本,所以它们受到 font-sizeline-height的影响,这使得它变得有点棘手。

一个想法是将 min-height 应用于所有输入的内容区域,以便为这些箭头的高度提供 MATCH 。 经过几个测试后,如果设置 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>

然后我们可以调整 paddingfont-sizeheight 等,它们总是保持相同的高度:


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>
原作者:
140 3

你可以设置行高:


input {


 vertical-align: top;


 line-height: 22px;


}

<input type="text">


<input type="date">
原作者:
...