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

Question

非常抱歉这个问题，但我似乎找不到答案。我有一段CSS代码应该设置文本框的高度。我正在使用VS2010 Express for Windows phone，使用HTML/CSS/Javascript/C#编码。

HTML

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

CSS

（直译）CSS

.heighttext{
  height:30px
}

我可以将高度设置为任何我喜欢的值，但文本框的大小不会改变！请帮帮我，或者至少给我发送一个帮助链接！

- Arrie

---

你的 CSS 代码似乎缺少了一个分号。 - Jayy

好的，它适用于我。@Kaipa：在最后一个CSS规则中分号是可选的。 - David Thomas

好的，现在明白了。这是可选的！ - Jayy

Answer 1

尝试使用padding和line-height -

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

- Dipak

---

@Dipkas，这对我非常有效！但是我可以问一下为什么填充有两个属性吗？我应该改哪一个才能使它变得更小一些？你真的帮了我大忙！ - Arrie

@Arrie 这是一个缩写形式，代表的是padding属性值为：20px 10px 20px 10px; /依次为 上、右、下、左/，以及两个值的情况：padding: 20px 10px; /上下 左右/... 希望这样清晰明了 :) - Dipak

他想要一个高度为30像素。上/下内边距为20加上行高为28，如何得到总高度为30？ - claudekennilol

我也不明白这怎么是答案。这不会导致高度为2 * 20 + 28吗？ - alaboudi

Answer 2

表单控件在跨平台/浏览器上样式化非常困难。一些浏览器将尊重CSS height 规则，而其他浏览器则不会。

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

- danwellman

Answer 3

你应该使用字体大小来控制高度，这在大多数浏览器中得到了广泛支持。 如果要添加间距，请使用填充。 例如，

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

- Rusty

---

font-size只在您想要增加输入字体大小时才相关。有时候您并不希望产生这种副作用。 - Hashim Aziz

Answer 4

不要在输入框中使用 height 属性。

示例：

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

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

- HAPPY SINGH

Answer 5

最佳的做法是：

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

- Ravi Kumar Yadav

Answer 6

您可以使用这个样式代码

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

- Saeed