使用额外的css/jQuery选项修改搜索框

Question

我正在创建一个具有以下css动画的搜索框查询，该查询显示在代码段中。它的工作就像我需要它，但我只想增加两样东西，让它为我工作。

1. 如何使搜索图标的命中区域，扩展标题的整个宽度，使其更加直观？目前，命中区域被固定到搜索图标的大小比。
2. 我还想知道，单击占位符文本后，如何在左侧显示搜索图标？

希望这是有意义的

​

$('.header').on('click', '.search-toggle', function(e) {
  var selector = $(this).data('selector');

  $(selector).toggleClass('show').find('.search-input').focus();
  $(this).toggleClass('active');
  e.preventDefault();
});

@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
  font-family: 'Roboto', sans-serif;
}

.header {
  max-width: 250px;
  margin: 2em auto 10em;
}

.header-nav {
  position: relative;
  padding-right: 3em;
}

.header-nav:before,
.header-nav:after {
  content: '';
  display: table;
}

.header-nav:after {
  clear: both;
}

.menu {
  display: inline-block;
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu span {
  display: inline-block;
}

.menu .text {
  color: #0097bf;
  display: block;
  padding: 10px;
  position: relative;
  transition: color 0.3s;
  text-decoration: none;
}

.search-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
}


/* search icon */

.search-toggle {
  position: relative;
  display: block;
  height: 10px;
  width: 10px;
}

.search-toggle::before,
.search-toggle::after {
  content: '';
  position: absolute;
  display: block;
  transition: all 0.1s;
}

.search-toggle::before {
  border: 2px solid #0097bf;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  left: -2px;
  top: -2px;
}

.search-toggle::after {
  height: 2px;
  width: 7px;
  background: #0097bf;
  top: 10px;
  left: 8px;
  transform: rotate(45deg);
}


/* x icon */

.search-toggle.active::before {
  width: 0;
  border-width: 1px;
  border-radius: 0;
  transform: rotate(45deg);
  top: -1px;
  left: 4px;
}

.search-toggle.active::after {
  width: 12px;
  left: -1px;
  top: 4px;
}

.search-input:focus {
  outline: none;
}

#header-2 {
  overflow: hidden;
}

#header-2 .menu span {
  opacity: 1;
  transition: transform 0.3s, opacity 0.2s 0.1s;
}

#header-2 .menu span .text:nth-child(1) {
  transition-delay: 0.4s;
}

#header-2 .search-box {
  position: absolute;
  left: 0;
  height: 100%;
  padding-left: 2em;
  transform: translateX(20%);
  opacity: 0;
  transition: all 0.4s 0.3s;
}

#header-2 .search-box .search-input {
  border: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

#header-2 .search-box .search-toggle {
  width: 14px;
  height: 14px;
  padding: 0;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

#header-2.show .menu span {
  transform: scale(0.8);
  opacity: 0;
}

#header-2.show .search-box {
  width: calc(100% - 5em);
  transform: translateX(0);
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-2"></a>
    </div>
    <p class="menu">
      <span><span class="text">Search</span></span>
    </p>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="Type here to search..." />
    </form>
  </nav>
</header>

​

Answer 1

这是如何使完整的标题‘点击’开始搜索。

我把图标放在左边的地方，看看你是否需要演示。

​

$('.header:not(.show)').on('click', '.header-nav', function(e) {
  var selector = $(this).find('.search-toggle').data('selector');

  $(selector).toggleClass('show').find('.search-input').focus();
  $(this).toggleClass('active');
  e.preventDefault();
});

@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
  font-family: 'Roboto', sans-serif;
}

.header {
  max-width: 250px;
  margin: 2em auto 10em;
}

.header-nav {
  position: relative;
  padding-right: 3em;
}

.header-nav:before,
.header-nav:after {
  content: '';
  display: table;
}

.header-nav:after {
  clear: both;
}

.menu {
  display: inline-block;
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu span {
  display: inline-block;
}

.menu .text {
  color: #0097bf;
  display: block;
  padding: 10px;
  position: relative;
  transition: color 0.3s;
  text-decoration: none;
}

.search-button {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translate(0, -50%);
}
.header.show .search-button{
  left: .3em; transition: all 500ms;
}

/* search icon */

.search-toggle {
  position: relative;
  display: block;
  height: 10px;
  width: 10px;
}

.search-toggle::before,
.search-toggle::after {
  content: '';
  position: absolute;
  display: block;
  transition: all 0.1s;
}


.search-toggle::before {
  border: 2px solid #0097bf;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  left: -2px;
  top: -2px;
}

.search-toggle::after {
  height: 2px;
  width: 7px;
  background: #0097bf;
  top: 10px;
  left: 8px;
  transform: rotate(45deg);
}


/* x icon */

.search-toggle.active::before {
  width: 0;
  border-width: 1px;
  border-radius: 0;
  transform: rotate(45deg);
  top: -1px;
  left: 4px;
}

.search-toggle.active::after {
  width: 12px;
  left: -1px;
  top: 4px;
}

.search-input:focus {
  outline: none;
}

#header-2 {
  overflow: hidden;
}

#header-2 .menu span {
  opacity: 1;
  transition: transform 0.3s, opacity 0.2s 0.1s;
}

#header-2 .menu span .text:nth-child(1) {
  transition-delay: 0.4s;
}

#header-2 .search-box {
  position: absolute;
  left: 0;
  height: 100%;
  padding-left: 2em;
  transform: translateX(20%);
  opacity: 0;
  transition: all 0.4s 0.3s;
}

#header-2 .search-box .search-input {
  border: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

#header-2 .search-box .search-toggle {
  width: 14px;
  height: 14px;
  padding: 0;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}

#header-2.show .menu span {
  transform: scale(0.8);
  opacity: 0;
}

#header-2.show .search-box {
  width: calc(100% - 5em);
  transform: translateX(0);
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-2" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-2"></a>
    </div>
    <p class="menu">
      <span><span class="text">Search</span></span>
    </p>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="Type here to search..." />
    </form>
  </nav>
</header>

​