I am trying to increase the size of an input field on a webpage. My width is fine, but my height is what I am trying to figure out.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>
<!-- searchBox -->

I am trying to increase the size of an input field on a webpage. My width is fine, but my height is what I am trying to figure out.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>
<!-- searchBox -->

• javascript
• html
• css

• 1 Have you tried setting a height on the input? – j08691 Commented Oct 20, 2015 at 13:49
• Yes, I have tried adding css code to every tag/element for that block of code, along with trying to manually add the css through the html tags. – TheDetailer Commented Oct 20, 2015 at 13:50
• padding: 40px 20px this modifies height and width seperatly – NooBskie Commented Oct 20, 2015 at 13:52
• 1 Really? Because setting the height seems to work jsfiddle/j08691/9g6tpbox – j08691 Commented Oct 20, 2015 at 13:53

2 Answers 2

You can simply increase the font size; the input will scale along with it.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

#searchBox input {
  font-size: 200%;
  width: 100px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>

There are 2 ways to do this. You may set the height with the attribute height inside the input, or change the height via css.

First Method:

<input type="text" name="search" height="200" />

Second Method:

input[name="search"] {
    height: 200px;
}

I prefer using the first one. Since it better expands to the text inside of it. But for using it multiple times, css is the way to go.

Also note that the first method might not work if you arent using any reset css or modernizer since browsers tend to overwrite/ignore the height attribute inside elements like inputs.