如何在HTML中定义输入文本框的大小？

90

这是一个HTML输入文本框：

<input type="text" id="text" name="text_name" />

定义盒子尺寸的选项有哪些？

如何在CSS中实现呢？

html css input

— os
source

— 托尼2015年

在某些情况下，设置max-width就足够了

— Christophe Roussy

129

您可以设置width：

<input type="text" id="text" name="text_name" style="width: 300px;" />

甚至更好地定义一个类：

<input type="text" id="text" name="text_name" class="mytext" />

并在单独的CSS文件中应用必要的样式：

.mytext {
    width: 300px;
}

如果要限制用户可以在此文本框中键入的字符数，可以使用以下maxlength属性：

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

— 达林·迪米特罗夫（Darin Dimitrov）
source

10

还可以：您可以使用“ em”（而不是“ px”）更改宽度，然后其大小与文本框的字体大小成比例

— Alexander Bird 2012年

45

该size属性也有效

<input size="25" type="text">

— 模糊分析
source

8

试试这个

<input type="text" style="font-size:18pt;height:420px;width:200px;">

要不然

 <input type="text" id="txtbox">

与CSS：

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

— 贾纳塔南·拉姆（Janarthanan Ramu）
source

3

您的答案没有添加任何新内容，您应该在CSS中指定单位（px，pt，％v等）

— Jon P

1

好吧，字体大小（style =“ font-size：18pt”）是我一直在寻找的字体，它也增加了盒子的大小。尽管OP并未明确要求，但它也增加了价值。

— Wolf5

这工作了。因此，非常感谢。但是，文本似乎将自身垂直居中。我可以以任何方式防止这种情况吗？

— 亚伦·约翰·萨布

@AaronJohnSabu抱歉，延迟。.尝试增加宽度大小..希望您已经找到答案..

— Janarthanan Ramu

3

您可以通过内联样式设置宽度（以像素为单位）：

<input type="text" name="text" style="width: 195px;">

您还可以设置可见字符长度的宽度：

<input type="text" name="text" size="35">

— 贝特里斯·曼帕兰兹
source

-2

<input size="45" type="text" name="name">

“大小”指定元素输入的可见宽度（以字符为单位）。

您也可以使用CSS中的高度和宽度。

<input type="text" name="name" style="height:100px; width:300px;">

— 丹尼尔·多斯·桑托斯
source