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

【问题标题】：How do I set the size of an HTML text box?如何设置 HTML 文本框的大小？
【发布时间】：2010-01-24 01:24:04
【问题描述】：

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

【问题讨论】：

标签： css

【解决方案1】：

只需使用：

textarea {
    width: 200px;
}

或

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

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

【讨论】：

注意：只做input 也会调整其他input 控件的大小，例如按钮
一个文本框是<input type="textbox" /> 和一个文本区域是<textarea></textarea> 是有区别的。
你是怎么做到的？
@MichaelGarrison 你的意思是type="text"？找不到在任何地方定义的type="textbox"：w3.org/TR/html5/forms.html#states-of-the-type-attribute
是的，type="text" 是我的意思，我想我只是匆忙写了这个

【解决方案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 个像素的内边距，因为如果内边距为 0 像素，某些浏览器会使文本框看起来过于拥挤。根据您的设计，您可能想要添加更多填充，但强烈建议您自己定义填充，否则您将由不同的浏览器自行决定。为了在浏览器之间实现更高的一致性，您还应该自己定义边框。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您的文本框代码：

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

您的 CSS 代码：

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

或

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

所以，首先您选择带有属性（查看第一个示例）或类（查看最后一个示例）的元素。稍后，您为元素分配高度和宽度值。

【讨论】：

感谢您的建议。我已经编辑了这个。我会尝试提出更好的问题。

【解决方案5】：

这适用于 IE 10 和 FF 23

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

【讨论】：

不，这在很多时候都不起作用，例如当前 Chrome 又名 2015 年左右最流行的浏览器
仅供参考，以后阅读这篇文章的人，大约在 2017 年年中在 Chrome 58 中运行良好。

【解决方案6】：

注意！ 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>

【讨论】：

【解决方案7】：

您可以使依赖输入宽度与容器宽度。

.container {
   width: 360px;
}

.container input {
   width: 100%;
}

【讨论】：

【解决方案8】：

如果不想使用类方法，可以使用父子方法对文本框进行修改。

例如。我在表单 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;
}

问题解决了。

【讨论】：

【解决方案9】：

试试：

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

这是它保持独立于为文本框设置的文本大小的方式。您正在使用填充来增加高度

【讨论】：

【解决方案10】：

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

【讨论】：