Best IT Recipes

How to increase html textbox height?

How to increase the height of the text box? (along with its font size)

+42
html textbox
Jul 20 '09 at 10:45
source share
8 answers

I assume that you have formulated the question that you want to resize after the page is displayed?

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

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

If you just want to specify the height and size of the font, use CSS or style attributes, for example.

 //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;" .....>
+40
Jul 20 '09 at 10:48
source share
— -

Note that if you want to use a text field with multiple lines, you must use <textarea> instead of <input type="text"> .

+22
Jul 21 '09 at 9:01
source share

Increasing the font size in the text box will usually automatically expand.

 <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 allows browsers such as IE to display text internally at the top rather than vertically in the center.

 .form-text{ padding:15px 0; }
+7
Jul 20 '09 at 10:51
source share
 <input type="text" style="font-size:xxpt;height:xxpx">

Just replace "xx" with whatever value you want.

+3
Jul 21 '09 at 8:58
source share

  • With inline style:

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

  • or using CSS:

    HTML:

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

    CSS

     #txtbox { font-size: 18pt; height: 42px; width : 300px; }
+1
Sep 09 '15 at 5:32
source share

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

0
Jul 20 '09 at 10:49
source share

Use CSS:

 <html> <head> <style> .Large { font-size: 16pt; height: 50px; } </style> <body> <input type="text" class="Large"> </body> </html>
0
Jul 20 '09 at 10:51
source share

If you want multiple lines to take this into account:

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

Specify lines as needed.

0
Jun 11 '17 at 1:44 on
source share


More articles:


All Articles