html - 如何使html输入的可点击区域更大

Question

所以我正在努力使网站的导航栏响应:http://codepen.io/anon/pen/VvmpKx

导航栏有一个简单的(目前没有功能的)搜索输入字段。

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

在大约 750 像素时，我减小了字体大小并增加了导航栏的高度，以便更容易点击导航栏链接。这很好用，除了搜索栏。

有没有办法让搜索输入上方和下方的区域可点击，就好像用户点击了输入本身，就像类别链接一样？

我更喜欢只使用 css 的解决方案，但 javascript 或 jquery 也是可以接受的。

Answer 1

当然!您可以添加 label在输入周围，然后将标签样式设置为具有 100% 的高度:

/* 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>