Question

因此，我正致力于制作网站的导航响应：http://codepen.io/anon/pen/VvmpKx

导航栏有一个简单的（当前无功能的）搜索输入字段。

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

大约750 px，我减小了字体大小并增加了导航栏的高度，以便更轻松地点击导航栏链接。除搜索栏外，这种方法很有用。

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

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

Answer 1

当然！您可以在输入周围添加THE ANSWER，然后将标签设置为100％高度：

＆＃13;

label

＆＃13;

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

＆＃13;

Answer 2

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

~~~language
... code ...
~~~

Updated example

Answer 3

你可以为此添加一些Jquery 像这样的事情可以解决问题。

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

Answer 4

您可以使用CSS伪类来实现。它特别适用于目标较小的输入-复选框/收音机。不幸的是，这不适用于IE：

array1= new Map(array1.map(o => [o.ID, o]));

array2.forEach(o => map.has(o.ID) && (o.IsChecked= map.get(o.ID).IsChecked == true ? true: false));

http://jsfiddle.net/gkaraliunas/0r0ag1ad/?utm_source=website&utm_medium=embed&utm_campaign=0r0ag1ad

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

4 个答案: