如何在 CSS 中设置输入（文本）字段的高度？答案

【问题标题】：How to set the height of an input (text) field in CSS?如何在 CSS 中设置输入（文本）字段的高度？
【发布时间】：2012-10-05 06:49:13
【问题描述】：

很抱歉这个问题，但我似乎无法在任何地方找到答案。我有应该设置我的文本框高度的 CSS 代码。我在 Windows 手机上使用 VS2010 Express，用 HTML/CSS/Javascript/C# 编码。

HTML

<input class="heighttext" type="text" id="name">

CSS

.heighttext{
  height:30px
}

我可以将高度设置为我喜欢的任何值，但文本框将保持不变！请帮忙，或者至少给我一个可以的链接！

【问题讨论】：

您的 css 代码中似乎缺少分号
好吧，it works for me。 @Kaipa：last CSS 规则的分号是可选的。
对，现在知道了。它是可选的！

标签： html css textfield

【解决方案1】：

试试padding 和line-height -

input[type="text"]{ padding: 20px 10px; line-height: 28px; }

【讨论】：

@Dipkas 这对我来说效果很好！但我可以问你为什么填充有 2 个属性吗？我应该改变哪一个来让它变小一点？你真的帮了我！
@Arrie 这是填充的简写：20px 10px 20px 10px； /*top right bottom left*/ 并且有两个值 padding: 20px 10px; /* 上下左右*/...希望这很清楚:)
他想要 30px 的高度。 20 的顶部/底部填充加上 28 的行高如何达到 30 的总高度？
我也不明白这是怎么回答的。这不会导致 2 * 20 + 28 的高度吗？

【解决方案2】：

你使用这个样式代码

.heighttext{
 float:right;
 height:30px;
 width:70px;
 }

【讨论】：

【解决方案3】：

众所周知，表单控件的样式很难跨平台/浏览器。有些浏览器会遵守 CSS height 规则，有些则不会。

您也可以尝试line-height（可能需要display:block; 或display:inline-block;）或top 和bottom padding。如果这些都不起作用，那就差不多了 - 使用图形，将 input 定位在中心并设置 border:none; 这样它看起来 表单控件很大，但实际上不是...

【讨论】：

【解决方案4】：

您应该使用 font-size 来控制高度，它在浏览器中得到广泛支持。为了增加间距，您应该使用填充。例如，

.inputField{
  font-size: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
}

【讨论】：

【解决方案5】：

不要在输入字段中使用高度属性。

例子：

.heighttext{
    display:inline-block;
    padding:15px 10px;
    line-height:140%;
}

始终使用 padding 和 line-height css 属性。它适用于所有移动设备和所有浏览器。

【讨论】：

【解决方案6】：

最好的方法是：

input.heighttext{
  padding: 20px 10px;
  line-height: 28px;
}

【讨论】：