搜索框在css中未正确点击位置

Question

我使用codepen创建了搜索框，

这是代码：

＆＃13;

＆＃13;

.search-box {
  height: 60px;
  font-size: 55px;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
  width: 700px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 127px;
  width: 53px;
  display: inline-block;
  color: red;
  float: right;
  background: url("http://s18.postimg.org/f4t3rukcl/icon.png")center center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  cursor: pointer;
  cursor: pointer;
  transition: opacity .4s ease;
}
input[type="submit"]:hover {
  opacity: 0.8;
}

＆＃13;

<div id="wrap">
  <form action="" autocomplete="on">
    <input id="search" name="search" class="search-box" type="text" placeholder="What're we looking for ?">
    <input id="search_submit" value="" type="submit">
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

这是DEMO

当我点击图标时，它无法正常工作..在某处点击图标，它可以正常工作。

我可以知道，如何修复它？

谢谢，

Answer 1

您有很多选项可以实现此功能。您是否尝试过按钮高度height:74px？

＆＃13;

＆＃13;

.search-box {
  height: 60px;
  font-size: 55px;
  display: inline-block;
  font-family: "Lato";
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 3px;
  padding-right: 60px;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}
input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
  width: 700px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 74px;
  width: 53px;
  display: inline-block;
  color: red;
  float: right;
  background: url("http://s18.postimg.org/f4t3rukcl/icon.png")center center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  cursor: pinter;
  cursor: pointer;
  transition: opacity .4s ease;
}
input[type="submit"]:hover {
  opacity: 0.8;
}

＆＃13;

<div id="wrap">
  <form action="" autocomplete="on">
    <input id="search" name="search" class="search-box" type="text" placeholder="What're we looking for ?">
    <input id="search_submit" value="" type="submit">
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

在FF上似乎对我有用

Answer 2

添加 css

.search-box{top:28px}

如果不试试这个

input[type="submit"] {height: 68px;}

Answer 3

试试这个

form {
    position: relative;
}

input[type="submit"] {
    z-index:9;
}

Answer 4

我认为正常工作。你也应该使用jquery。

find demo here

$('#search_submit, .search-box').focus(function(){
  $('.search-box').addClass('search-width');
});
$('#search_submit, .search-box').blur(function(){
  $('.search-box').removeClass('search-width');
});