How to make clickable area for html input larger - html

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>
<span>Site title</span>
<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>

Answer 2

Put an event listener on the encapsulating form:
var backgroundForm = document.getElementById('background');
var search = document.getElementById('search');
backgroundForm.addEventListener('click', function(){
search.focus();
});
Updated example

Answer 3

You can add some Jquery for that.
Some thing like this will do the trick.
$(window).ready(function(){
$("form.search").click(function(){
$(this).find("input").focus();
});
});

Answer 4

You can make it with CSS pseudo classes. It's especially suitable for inputs with small targets - checkboxes/radios. Unfortunately, this does not work on IE:
input[type="checkbox"] {
position: relative;
}
input:before {
content: '';
cursor: pointer;
display: block;
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
http://jsfiddle.net/gkaraliunas/0r0ag1ad/?utm_source=website&utm_medium=embed&utm_campaign=0r0ag1ad