CODEWITHSUNDEEP
htmlcss
Tablesalt
Tablesalt

Reputation: 143

How to make clickable area for html input larger

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.

Upvotes: 4

Views: 9731

Answers (4)

Giedrius
Giedrius

Reputation: 138

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

Upvotes: -1

Dushy
Dushy

Reputation: 405

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

Upvotes: 1

Lloyd Banks
Lloyd Banks

Reputation: 36648

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

Upvotes: 1

Scott
Scott

Reputation: 5369

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>

Upvotes: 5

Related Questions