how do you increase the height of an html textbox

Question

How do you increase the height of an textbox? (along with its font size)

you shouldn't use explicit pt or px measurements for css, you should always use ems for increased accessibility. — Andrew Bullock, Jul 20 '09 at 11:04
I'm having the same problem, height does not work :( http://codepen.io/leongaban/pen/Eknsc it's because of search, I'll post a new question tomorrow — Leon Gaban, Jun 20 '13 at 04:46

Paul Dixon · Accepted Answer · 2009-07-20T10:54:04.797

I'm assuming from the way you worded the question that you want to change the size after the page has rendered?

In Javascript, you can manipulate DOM CSS properties, for example:

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.

//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;" .....>

score 37 · Answer 2 · answered Jul 21 '09 at 09:01

37

Note that if you want a multi line text box you have to use a <textarea> instead of an <input type="text">.

answered Jul 21 '09 at 09:01

Jan Aagaard

10,940
8
45
80

Sam Becker · Answer 3 · 2012-02-22T05:10:50.193

11

Increasing the font size on a text box will usually expand its size automatically.

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

If you want to set a height that is not proportional to the font size, I would recommend using something like the following. This prevents browsers like IE from rendering the text inside at the top rather than vertically centered.

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

edited Feb 22 '12 at 05:10

answered Jul 20 '09 at 10:51

Sam Becker

19,231
14
60
80

1

Good point, due to the question I was assuming he wanted to set both, however if it is just to increase the size of the textbox to fit the large text then this would be the ideal solution. – James Jul 20 '09 at 10:55

score 6 · Answer 4 · answered Jul 21 '09 at 08:58

6

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

Just replace "xx" with whatever values you wish.

answered Jul 21 '09 at 08:58

user

16,429
28
80
97

2

this makes the text render from vertical center of the text box , how to avoid this? – Kitwradr Nov 14 '18 at 15:13

Janarthanan Ramu · Answer 5 · 2015-09-10T13:39:07.800

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;
}

edited Sep 10 '15 at 13:39

answered Sep 09 '15 at 05:32

Janarthanan Ramu

1,331
16
17

2

When you post code examples, also post explanations for them. – sideshowbarker Sep 09 '15 at 05:52

score 4 · Answer 6 · answered Jun 11 '17 at 01:44

4

If you want multiple lines consider this:

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

Specify rows as needed.

answered Jun 11 '17 at 01:44

Gayan Dasanayake

1,933
2
17
22

score 0 · Answer 7 · answered Jul 20 '09 at 10:49

0

Don't the height and font-size CSS properties work for you ?

answered Jul 20 '09 at 10:49

Cerebrus

25,615
8
56
70

score 0 · Answer 8 · answered Jul 20 '09 at 10:51

0

Use CSS:

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

answered Jul 20 '09 at 10:51

James

80,725
18
167
237

how do you increase the height of an html textbox

8 Answers8

Linked