CSS 如何设置 HTML 文本框的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2125509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set the size of an HTML text box?
提问by user225269
How do I set the size of an HTML text box?
如何设置 HTML 文本框的大小？
回答by Rowno
Just use:
只需使用：
textarea {
width: 200px;
}
or
或者
input[type="text"] {
width: 200px;
}
Depending on what you mean by 'textbox'.
取决于您所说的“文本框”是什么意思。
回答by Dan Herbert
Your markup:
你的标记：
<input type="text" class="resizedTextbox" />
The CSS:
CSS：
.resizedTextbox {width: 100px; height: 20px}
Keep in mind that text box size is a "victim" of the W3C box model. What I mean by victim is that the height and width of a text box is the sum of the height/width properties assigned above, in addition to the padding height/width, and the border width. For this reason, your text boxes will be slightly different sizes in different browsers depending on the default padding in different browsers. Although different browsers tend to define different padding to text boxes, most reset style sheetsdon't tend to include <input />tags in their reset sheets, so this is something to keep in mind.
请记住，文本框大小是W3C 框模型的“受害者” 。我所说的受害者的意思是文本框的高度和宽度是上面分配的高度/宽度属性的总和，此外还有填充高度/宽度和边框宽度。因此，您的文本框在不同浏览器中的大小会略有不同，具体取决于不同浏览器中的默认填充。尽管不同的浏览器倾向于为文本框定义不同的填充，但大多数重置样式表并不倾向于<input />在其重置表中包含标签，因此需要牢记这一点。
You can standardize this by defining your own padding. Here is your CSS with specified padding, so the text box looks the same in all browsers:
您可以通过定义自己的填充来对此进行标准化。这是具有指定填充的 CSS，因此文本框在所有浏览器中看起来都相同：
.resizedTextbox {width: 100px; height: 20px; padding: 1px}
I added 1 pixel padding because some browsers tend to make the text box look too crammed if the padding is 0px. Depending on your design, you may want to add even more padding, but it is highly recommend you define the padding yourself, otherwise you'll be leaving it up to different browsers to decide for themselves. For even more consistency across browsers, you should also define the border yourself.
我添加了 1 像素内边距，因为如果内边距为 0 像素，某些浏览器往往会使文本框看起来过于拥挤。根据您的设计，您可能想要添加更多填充，但强烈建议您自己定义填充，否则您将留给不同的浏览器自行决定。为了在浏览器之间更加一致，您还应该自己定义边框。
回答by tcao
input[type="text"]
{
width:200px
}
回答by Lightsaber
Your textbox code:
您的文本框代码：
<input type="text" class="textboxclass" />
Your CSS code:
您的 CSS 代码：
input[type="text"] {
height: 10px;
width: 80px;
}
or
或者
.textboxclass {
height: 10px;
width: 80px;
}
So, first you select your element with attributes (look at first example) or classes(look last example). Later, you assign height and width values to your element.
因此，首先选择具有属性（查看第一个示例）或类（查看最后一个示例）的元素。稍后，您为元素分配高度和宽度值。
回答by joym8
This works for me in IE 10 and FF 23
这在 IE 10 和 FF 23 中对我有用
<input type="text" size="100" />
回答by Johnny Vikrant
If you don't want to use the class method you can use parent-child method to make changes in the text box.
如果不想使用类方法，可以使用父子方法在文本框中进行更改。
For eg. I've made a form in my form div.
例如。我在表单 div 中创建了一个表单。
HTML Code:
HTML代码：
<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>
Now CSS code will be like:
现在 CSS 代码将如下所示：
.form textarea{
height: 220px;
width: 342px;
Problem solved.
问题解决了。
回答by R Keene
Lookout! The width attribute is clipped by the max-width attribute. So I used....
当心！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>
回答by Ilya Degtyarenko
You can make the dependent input width versus container width.
您可以使依赖输入宽度与容器宽度。
.container {
width: 360px;
}
.container input {
width: 100%;
}
回答by Erol Balci
Try:
尝试：
input[type="text"]{
padding:10px 0;}
This is way it remains independent of what textsize has been set for the textbox. You are increasing the height using padding instead
这是它保持独立于为文本框设置的文本大小的方式。您正在使用填充来增加高度
回答by madhab
Try this code :
试试这个代码：
input[type="text"]{
padding:10px 0;}
This way it remains independent of what textsize has been set for the textbox. You are increasing the height using padding instead.
这样它就保持独立于为文本框设置的文本大小。您正在使用填充来增加高度。
