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

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

只需使用：

textarea {
    width: 200px;
}

要么

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

取决于“文本框”的含义。

您的标记：

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

CSS：

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

请记住，文本框的大小是W3C框模型的“受害者” 。受害者的意思是，文本框的高度和宽度是上面分配的高度/宽度属性的总和，此外还有填充高度/宽度和边框宽度。因此，根据不同浏览器中的默认填充，文本框在不同浏览器中的大小会略有不同。尽管不同的浏览器倾向于为文本框定义不同的填充，但是大多数重置样式表往往不会<input />在其重置表中包含标签，因此请记住这一点。

您可以通过定义自己的填充来对此进行标准化。这是带有指定填充的CSS，因此文本框在所有浏览器中看起来都是相同的：

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

我添加了1像素填充，因为如果填充为0px，某些浏览器会使文本框看起来过于拥挤。根据您的设计，您可能想要添加更多的填充，但是强烈建议您自己定义填充，否则将由其他浏览器自行决定。为了在浏览器之间实现更大的一致性，还应该自己定义边框。

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

您的文本框代码：

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

您的CSS代码：

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

要么

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

因此，首先选择具有属性（请参见第一个示例）或类（请参见最后一个示例）的元素。稍后，您可以为元素分配高度和宽度值。

这在IE 10和FF 23中对我有用

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

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

例如。我已经在表格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; 

问题解决了。

小心！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>

尝试：

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

这样，它便与为文本框设置的文本大小无关。您正在使用填充来增加高度

试试这个代码：

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

这样，它仍然与为文本框设置的文本大小无关。您正在使用填充来增加高度。

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

您可以将依赖的输入宽度与容器宽度进行比较。

.container {
   width: 360px;
}

.container input {
   width: 100%;
}