如何增加 html 文本框的高度答案

【问题标题】：how do you increase the height of an html textbox如何增加 html 文本框的高度
【发布时间】：2009-07-20 10:45:02
【问题描述】：

如何增加文本框的高度？（连同它的字体大小）

【问题讨论】：

【解决方案1】：

我从您提出问题的方式假设您想在页面呈现后更改大小？

在Javascript中，你可以操作DOM CSS properties，例如：

document.getElementById('textboxid').style.height="200px";
document.getElementById('textboxid').style.fontSize="14pt";

如果您只是想指定高度和字体大小，请使用 CSS 或样式属性，例如

//in your CSS file or <style> tag
#textboxid
{
    height:200px;
    font-size:14pt;
}

<!--in your HTML-->
<input id="textboxid" ...>

或者

<input style="height:200px;font-size:14pt;" .....>

【讨论】：

【解决方案2】：

请注意，如果您想要一个多行文本框，您必须使用 <textarea> 而不是 <input type="text">。

【讨论】：

【解决方案3】：

增加文本框的字体大小通常会自动扩大其大小。

<input type="text" style="font-size:16pt;">

如果您想设置与字体大小不成比例的高度，我建议您使用以下内容。这可以防止像 IE 这样的浏览器将文本呈现在顶部而不是垂直居中。

.form-text{
    padding:15px 0;
}

【讨论】：

【解决方案4】：

<input type="text" style="font-size:xxpt;height:xxpx">

只需将“xx”替换为您想要的任何值。

【讨论】：

【解决方案5】：

内联样式：

<input type="text" style="font-size: 18pt; height: 40px; width:280px; ">

或单独的 CSS：

HTML：

<input type="text" id="txtbox">

CSS：

#txtbox {
    font-size: 18pt;
    height: 42px;
    width : 300px;
}

【讨论】：

【解决方案6】：

如果你想要多行考虑这个：

<textarea rows="2"></textarea>

根据需要指定行。

【讨论】：

【解决方案7】：

height 和 font-size CSS 属性不适合您吗？

【讨论】：

【解决方案8】：

使用 CSS：

<html>
<head>
<style>
.Large
{
    font-size: 16pt;
    height: 50px;
}
</style>
<body>
<input type="text" class="Large">
</body>
</html>

【讨论】：