Increasing The Size Of A Input Field In HTML/CSS/JS

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.

Solution 1:

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>

Solution 2:

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.