how do you increase the height of an html textbox

HtmlTextbox

Html Problem Overview

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

Html Solutions

Solution 1 - Html

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

Solution 2 - Html

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

Solution 3 - Html

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

Solution 4 - Html

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

Just replace "xx" with whatever values you wish.

Solution 5 - Html

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

Solution 6 - Html

If you want multiple lines consider this:

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

Specify rows as needed.

Solution 7 - Html

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

Solution 8 - Html

Use CSS:

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

Previous Solution:

SaveOrUpdate Vs Update and Save in NHibernate

Nhibernate

Next Solution:

How many times can a file be compressed?

CompressionLimits

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmrblahView Question on Stackoverflow
Solution 1 - HtmlPaul DixonView Answer on Stackoverflow
Solution 2 - HtmlJan AagaardView Answer on Stackoverflow
Solution 3 - HtmlSam152View Answer on Stackoverflow
Solution 4 - HtmluserView Answer on Stackoverflow
Solution 5 - HtmlJanarthanan RamuView Answer on Stackoverflow
Solution 6 - HtmlGayan DasanayakeView Answer on Stackoverflow
Solution 7 - HtmlCerebrusView Answer on Stackoverflow
Solution 8 - HtmlJamesView Answer on Stackoverflow