如何在 CSS 中设置输入(文本)字段的高度

Question

很抱歉这个问题，但我似乎在任何地方都找不到答案。我有CSS代码可以设置文本框的高度。我正在使用VS2010 Express的Windows Phone，用HTML/CSS/Javascript/C#编码。

.HTML

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

.CSS

.heighttext{
  height:30px
}

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

Answer 1

尝试使用 padding 和 line-height -

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

Answer 2

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

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

Answer 3

您应该使用字体大小来控制高度，它在浏览器中得到了广泛的支持。为了添加间距，您应该使用填充。例如，

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

Answer 4

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

例：

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

始终使用填充和行高 css 属性。它的工作非常适合所有移动设备和所有浏览器。

Answer 5

最好的方法是：

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

Answer 6

使用此样式代码

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