How to make clickable area for html input larger

Question

So I'm working on making a website's navbar responsive: http://codepen.io/anon/pen/VvmpKx

The navbar has a simple (currently nonfunctional) search input field.

<nav>
...
    <form class="search">
        <input type="text" size="15" placeholder="Search..." />
    </form>
</nav>

At about 750 px, I reduce the font size and increase the height of the nav bar, to make it easier to click the navbar links. This works great, except for the search bar.

Is there a way to make the area above and below the search input clickable, as if the user had clicked on the input itself, as it is for the category links?

I'd prefer solutions using only css, but javascript or jquery is also acceptable.

Answer 1

Sure! You can add a label around the input, then style the label to have 100% height:

/* New style */

nav form.search label {
  height: 100%;
  display: block;
}

/* Untouched styles */

nav {
  font-family: "Merriweather Sans", "Tahoma", "Trebuchet MS", sans-serif;
  background-color: #333;
  margin: 0 0 1em 0;
  height: 2em;
  padding: 0 0.3em;
}

nav a {
  color: #FFF;
  text-decoration: none;
  padding: 0 0.5em;
  margin: 0 0.1em;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  line-height: 2em;
  transition: background-color .2s ease-in-out;
}

nav a.news:hover {
  background-color: #0581C1;
}

nav a.comm:hover {
  background-color: #228B22;
}

nav a.variety:hover {
  background-color: #9966CC;
}

nav a.sports:hover {
  background-color: #DAA520;
}

nav a.satire:hover {
  background-color: #B31B1B;
}

nav a:active {
  background: #777;
}

nav form.search {
  float: right;
  display: inline;
  vertical-align: middle;
  line-height: 2em;
  padding: 0 0.5em;
}

nav form.search input {
  border-radius: 5px;
  width: 5em;
  height: 1em;
  transition: width .3s ease-in-out, height .3s ease-in-out, margin-right .3s ease-in-out;
}

nav form.search input:focus {
  width: 10em;
  height: 1.2em;
  margin-right: -0.2em;
}

@media (max-width: 750px) {
  nav {
    font-size: 0.8em;
    height: 5em;
  }
  nav a,
  nav form.search {
    line-height: 5em;
  }
}

<nav>
  <a href="#"><span>Site title</span></a>
  <a class="news" href="#"><span>Category</span></a>
  <a class="comm" href="#"><span>Category</span></a>
  <a class="variety" href="#"><span>Category</span></a>
  <form class="search">
    <label>
      <input type="text" size="15" placeholder="Search..." />
    </label>
  </form>
</nav>