logo标签列表

如何增加HTML文本框的高度？

htmltextbox
67

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

在CSS中，您不应该使用明确的pt或px测量单位，而应始终使用ems以提高可访问性。 - Andrew Bullock
我遇到了同样的问题，高度不起作用 :( http://codepen.io/leongaban/pen/Eknsc 这是因为搜索的原因，我明天会发布一个新的问题。 - Leon Gaban
8个回答
69

根据您提问的措辞，我认为您想要在页面渲染后更改大小？

在Javascript中，您可以操作DOM CSS属性，例如：

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;" .....>
37
请注意，如果您想要一个多行文本框，您必须使用 <textarea> 而不是 <input type="text">。
11

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

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

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

.form-text{
    padding:15px 0;
}
1
好的观点，由于问题的原因，我假设他想要同时设置两者，但是如果只是为了增加文本框的大小以适应大文本，那么这将是理想的解决方案。 - James
6
<input type="text" style="font-size:xxpt;height:xxpx">

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

2
如何避免文本从文本框的垂直中心呈现？ - Kitwradr
5

  • With inline style:

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

  • or with apart CSS:

    HTML:

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

    CSS:

    #txtbox {
    font-size: 18pt;
    height: 42px;
    width : 300px;
}
2
当您发布代码示例时，请同时附上解释。 - sideshowbarker
4

如果您需要多行文本，请考虑以下方法：

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

根据需要指定行。

0
使用CSS：
<html>
<head>
<style>
.Large
{
    font-size: 16pt;
    height: 50px;
}
</style>
<body>
<input type="text" class="Large">
</body>
</html>
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接