How do I set the size of an HTML text box?

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

600793 次浏览
小开
最佳答案

使用:

textarea {
width: 200px;
}

或者

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

这取决于你所说的“文本框”是什么意思。

小开

Your markup:

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

The CSS:

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

请记住，文本框大小是 W3C box model的“受害者”。我所说的“受害者”是指文本框的高度和宽度是上面分配的高度/宽度属性，以及填充高度/宽度和边框宽度的总和。因此，根据不同浏览器中的默认填充，文本框在不同浏览器中的大小略有不同。虽然不同的浏览器往往定义不同的填充到文本框，大多数 复位样式表复位样式表往往不包括 <input />标记在他们的重置工作表，所以这是要记住的东西。

您可以通过定义自己的填充来标准化它。下面是带有指定填充的 CSS，所以文本框在所有浏览器中看起来都是一样的:

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

我添加了1像素的填充，因为有些浏览器往往使文本框看起来太拥挤，如果填充为0px。根据您的设计，您可能希望添加更多的填充，但是强烈建议您自己定义填充，否则将由不同的浏览器自行决定。为了在不同浏览器之间保持更好的一致性，您还应该自己定义边框。

小开

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

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

试试:

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

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

小开

你的文本框代码:

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

Your CSS code:

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

或者

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

因此，首先选择具有属性(看第一个示例)或类(看最后一个示例)的元素。稍后，将高度和宽度值分配给元素。

小开

这对我在 IE10和 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;
}

Problem solved.

小开

Lookout! The width attribute is clipped by the max-width attribute. 所以我用..。

    <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>
小开

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

.container {
width: 360px;
}


.container input {
width: 100%;
}

提交答案