Fontawesome在搜索栏中

Question

我正在尝试使用fontawesome中的搜索图标而不是background-image使用转换来扩展输入区域的搜索栏中的搜索图标.单击此图标,该区域应该打开.

我试过了

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" name="eingabe" placeholder="Suche">
<i class="fa fa-search" aria-hidden="true"></i>
</input>

但是然后符号在输入旁边,我无法点击它来使用我的过渡来擦除输入的宽度.

@Saurav几乎解决了我的问题,但我无法点击图标.

.search-bar {
  position: relative;
}

.search-bar .icon {
  position: absolute;
  top: 47%;
  left: 10px;
  transform: translateY(-50%);
}

.search-bar .input-text {
  width: 0px;
  border: 0px;
  background-color: #fff;
  height: 20px;
  padding: 8px 8px 8px 35px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
.search-bar .input-text:focus {
  width: 80%;
  background-color: #ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-bar">
  <i class="icon fa fa-search"></i>
  <input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>

Answer 1

您可以尝试使用div(例如.search-bar)容器,我们可以在其中使用带有CSS定位和搜索输入的搜索图标并将其包装起来,将其视为占位符,如:

<div class="search-bar">
  <i class="icon fa fa-search"></i>
  <input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>

你还需要一个小jQuery(只是为了切换类),并使用max-width而不是宽度为.input-text:

JS(jQuery - 用于切换'active'类)

$('.search-bar .icon').on('click', function() {
  $(this).parent().toggleClass('active');
});

CSS(切换活动类时)

.search-bar.active .input-text {
  max-width: 80%;
  border: 1px solid #ccc;
  background: #eee;
}

请查看下面的更新代码段:

$('.search-bar .icon').on('click', function() {
  $(this).parent().toggleClass('active');
});

.search-bar {
  position: relative;
}

.search-bar.active .input-text {
  max-width: 80%;
  border: 1px solid #ccc;
  background: #eee;
}

.search-bar .icon {
  cursor: pointer;
  position: absolute;
  top: 47%;
  left: 0;
  transform: translateY(-50%);
  padding: 13px 15px 13px 11px;
}

.search-bar .input-text {
  max-width: 0;
  border: 0;
  border-color: #ccc;
  height: 20px;
  padding: 8px 6px 8px 35px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-bar">
  <i class="icon fa fa-search"></i>
  <input class="input-text" type="text" name="eingabe" placeholder="Suche">
</div>

希望这可以帮助!