如何使 HTML/CSS 中的文本框变大？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21506276/
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 make the text box bigger in HTML/CSS?
提问by xiiJaMiiE
I am not sure where you edit the code for my question so I put both (sorry if that confuses anyone)
我不确定你在哪里编辑我的问题的代码，所以我把两个都放了（对不起，如果这让任何人感到困惑）
In the top right hand corner there are two text boxes, but I'm not sure how to make them bigger in height. Please could you help me?
在右上角有两个文本框，但我不知道如何使它们的高度更大。请你能帮帮我吗？
Here is the link to my site so far: http://jsfiddle.net/xiiJaMiiE/4UUgg/1/embedded/result/
到目前为止，这是我网站的链接：http: //jsfiddle.net/xiiJaMiiE/4UUgg/1/embedded/result/
#signin
{
position:absolute;
min-width:22%;
height 20%;
top:0%;
right:0%;
z-index:10;
background-color:#CCC;
border: 1px solid grey;
}
#signin input {
background-color:#FFF
}
Sorry to be a pain, but also how do I add text into it? but when the user clicks in the box is disappears? Thanks for your help!
对不起，我很痛苦，但我如何在其中添加文本？但是当用户点击框时消失？谢谢你的帮助！
回答by Dozer789
According to thisanswer, here is what it says:
根据这个答案，它是这样说的：
In Javascript, you can manipulate DOM CSS properties, for example:
在 Javascript 中，您可以操作 DOM CSS 属性，例如：
document.getElementById('textboxid').style.height="200px";
document.getElementById('textboxid').style.fontSize="14pt";
If you simply want to specify the height and font size, use CSS or style attributes, e.g.
如果您只想指定高度和字体大小，请使用 CSS 或样式属性，例如
//in your CSS file or <style> tag
#textboxid
{
height:200px;
font-size:14pt;
}
<!--in your HTML-->
<input id="textboxid" ...>
Or
或者
<input style="height:200px;font-size:14pt;" .....>
回答by Danny Harding
If you want to make them a lot bigger, like for multiple lines of input, you may want to use a textareatag instead of the input tag. This allows you to put in number of rows and columns you want on your textarea without messing with css (e.g. <textarea rows="2" cols="25"></textarea>).
如果你想让它们更大，比如多行输入，你可能需要使用textarea标签而不是 input 标签。这使您可以在 textarea 中放入所需的行数和列数，而不会弄乱 css（例如<textarea rows="2" cols="25"></textarea>）。
Text areas are resizable by default. If you want to disable that, just use the resize css rule:
默认情况下，文本区域可调整大小。如果你想禁用它，只需使用调整大小的 css 规则：
#signin textarea {
resize: none;
}
A simple solution to your question about default text that disappears when the user clicks is to use the placeholder attribute. This will work for <input>tags as well.
关于用户单击时消失的默认文本问题的一个简单解决方案是使用占位符属性。这也适用于<input>标签。
<textarea rows="2" cols="25" placeholder="This is the default text"></textarea>
This text will disappear when the user enters information rather than when they click, but that is common functionality for this kind of thing.
当用户输入信息而不是点击时，此文本将消失，但这是此类事情的常见功能。
回答by krowe
This will do it:
这将做到：
#signin input {
background-color:#FFF;
min-height:200px;
}
回答by Will
Try this:
尝试这个：
#signin input {
background-color:#FFF;
height: 1.5em;
/* or */
line-height: 1.5em;
}
回答by user3246890
there are many options that would change the height of an input box. padding, font-size, height would all do this. different combinations of these produce taller input boxes with different styles. I suggest just changing the font-size (and font-family for looks) and add some padding to make it even taller and also more appealing. I will give you an example of all three style though:
有很多选项可以改变输入框的高度。填充、字体大小、高度都可以做到这一点。这些的不同组合产生具有不同风格的更高的输入框。我建议只更改字体大小（和字体系列的外观）并添加一些填充以使其更高，也更吸引人。不过，我会给你一个所有三种风格的例子：
#signin input {
font-size:20px;
}
OR
或者
#signin input {
padding:10px;
}
OR
或者
#signin input {
height:24px;
}
This is the combination of the three that I recommend:
这是我推荐的三者的组合：
#signin input {
font-size:20px;font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
padding:10px;
}
回答by Chou One
.textbox {
height: 40px;
}
<div id=signin>
<input type="text" class="textbox" size="25%" height="50"/></br>
<input type="text" class="textbox" size="25%" height="50"/>
Make the font size larger and add height (or line height to the input boxes) I would not recommend adding those size and height attributes in the HTML as that can be handled by CSS. I have made a class text-box that can be used for multiple input boxes
使字体变大并添加高度（或输入框的行高）我不建议在 HTML 中添加这些大小和高度属性，因为 CSS 可以处理这些属性。我制作了一个可用于多个输入框的类文本框
