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

时间:2012-10-15 09:54:37

标签: html css textfield

对不起这个问题,我似乎无法在任何地方找到答案。 我有CSS代码,应该设置我的文本框的高度。我正在使用VS2010 Express for Windows phone,用HTML / CSS / Javascript / C#编码。

HTML

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

CSS

.heighttext{
  height:30px
}

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

6 个答案:

答案 0 :(得分:39)

尝试使用paddingline-height -

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

答案 1 :(得分:2)

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

您可以尝试line-height(可能需要display:block;display:inline-block;)或topbottom padding。如果这些都不起作用,那就是 - 使用图形,将input置于中心并设置border:none;使其看起来就像表格控件很大但它实际上不是......

答案 2 :(得分:1)

做到这一点的最佳方法是:

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

答案 3 :(得分:0)

您使用此样式代码

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

答案 4 :(得分:0)

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

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

答案 5 :(得分:0)

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

示例:

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

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