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

2

8 Answers

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 ...>

Or

<input .....>

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

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

<input type="text">

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; }
1
<input type="text">

Just replace "xx" with whatever values you wish.

1

  • With inline style:

    <input type="text">

  • or with apart CSS:

    HTML:

    <input type="text">

    CSS:

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

If you want multiple lines consider this:

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

Specify rows as needed.

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

0

Use CSS:

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