如何扩大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也可以接受。

- Tablesalt

Answer 1

当然可以！您可以在输入框周围添加一个"label"，然后将该"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>

- Scott

Answer 2

在封装表单上放置一个事件监听器：

var backgroundForm = document.getElementById('background');
var search = document.getElementById('search');
backgroundForm.addEventListener('click', function(){
    search.focus();
});

更新的示例

- Lloyd Banks

Answer 3

你可以添加一些 JQuery 来实现这个功能。
类似这样的东西就可以做到。

$(window).ready(function(){    
    $("form.search").click(function(){
        $(this).find("input").focus();
    });
});

- Dushy

Answer 4

你可以使用CSS伪类来实现。这对于目标较小的输入框(例如：复选框/单选框)特别适用。不幸的是，这在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

- Giedrius

---

<input/>是自封闭（X）HTML5标签，因此不能具有::before和::after伪元素。您可以为<button/>使用::before和::after，但不得为<input/>、<img/>、<br/>等使用。在这种情况下，IE的行为是正确的。另外，<textarea/>没有before和after伪元素。 - 18C