如何设置HTML文本框的大小？

Question

如何设置HTML文本框的大小？

Answer 1

只需使用:

textarea {
    width: 200px;
}

要么

input[type="text"] {
    width: 200px;
}

取决于"文本框"的含义.

Answer 2

你的标记:

<input type="text" class="resizedTextbox" />

CSS:

.resizedTextbox {width: 100px; height: 20px}

请记住,文本框大小是W3C盒子模型的"受害者" .我的意思是受害者是文本框的高度和宽度是上面指定的高度/宽度属性的总和,以及填充高度/宽度和边框宽度.因此,根据不同浏览器中的默认填充,您的文本框在不同浏览器中的大小会略有不同.虽然不同的浏览器倾向于为文本框定义不同的填充,但大多数重置样式表不会<input />在其重置表中包含标记,因此需要牢记这一点.

您可以通过定义自己的填充来标准化.这是您指定填充的CSS,因此所有浏览器中的文本框看起来都相同:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

我添加了1个像素填充,因为如果填充为0px,某些浏览器往往会使文本框看起来太挤.根据您的设计,您可能希望添加更多填充,但强烈建议您自己定义填充,否则您将把它留给不同的浏览器来自行决定.为了在浏览器之间实现更高的一致性,您还应该自己定义边框.

Answer 3

input[type="text"]
{
    width:200px
}

Answer 4

你的文本框代码:

<input type="text" class="textboxclass" />

你的CSS代码:

input[type="text"] {
height: 10px;
width: 80px;
}

要么

.textboxclass {
height: 10px;
width: 80px;
}

因此,首先选择具有属性的元素(查看第一个示例)或类(查看上一个示例).稍后,您可以为元素指定高度和宽度值.

Answer 5

这适用于 IE 10 和 FF 23

<input type="text" size="100" />