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 box model的“受害者”。我的意思是受害者是文本框的高度和宽度是上面指定的高度/宽度属性的总和，以及填充高度/宽度和边框宽度。因此，根据不同浏览器中的默认填充，您的文本框在不同浏览器中的大小会略有不同。虽然不同的浏览器倾向于为文本框定义不同的填充，但大多数reset style sheets不会在重置表中包含<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" />

Answer 6

如果您不想使用类方法，可以使用父子方法在文本框中进行更改。

例如。我在表单div中制作了一个表单。

HTML代码：

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

现在CSS代码就像：

.form textarea{
    height: 220px;
    width: 342px;

问题解决了。

Answer 7

外景！ width属性由max-width属性剪裁。所以我用....

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>

Answer 8

可以使用height和width属性来调整元素的大小。

Answer 9

尝试：

input[type="text"]{
padding:10px 0;}

这样它仍然独立于为文本框设置的文本大小。您正在使用填充增加高度

Answer 10

试试这段代码：

input[type="text"]{
 padding:10px 0;}

这样它仍然独立于为文本框设置的文本大小。您正在使用填充增加高度。

Answer 11

您可以使从属输入宽度与容器宽度之间的关系。

/api/stuff?number=42&filter=[]

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

11 个答案: