CSS Как корректно оформить поиск?

308

18 июля 2017, 18:08

Помогите с оптимальной настройкой (концепцией) открывающегося поиска по клику:

Зелёная иконка - class="label". При нажатии едет вправо и становится крестиком (функция: открыть - закрыть).
Синяя иконка (скрыта до клика) - class="action", выполняет роль Enter.
Форма для вставки поискового запроса - input id="search".

<div class="field search">
  <label class="label" for="search" data-role="minisearch-label"></label>
  <div class="control">
      <input id="search" class="search-autocomplete">
  </div>
</div>
<div class="actions">
  <button type="submit" title="<?php echo $block->escapeHtml(__('Search')) ?>" class="action search">
    </button>
</div>

Работа JS (Jquery):

При нажатии на иконку поиска label class="label", меняет класс class="label active".
А окно поиска input id="search" меняется на id="search active".
Кнопка закрытия не обязательна. В Jquery прописано закрытие при потере фокуса.

PS. Прошу помочь в рамках вопроса и данных в нём. Тут возникает ряд проблем: корректная подмена иконок, но это выполнимо с помощью z-index. Другая важная проблема, если задавать для input width: 0, перестаёт работать клик на планшетах.

Answer 1

Как например:

$('.search__trigger').on('click', function(e){ 
  e.preventDefault(); 
   
  var 
    $this = $(this), 
     ico  = $this.find('.fa'), 
     form = $this.closest('.search__form'); 
   
  if(!form.hasClass('open')){ 
    form.addClass('open'); 
    ico.toggleClass('fa-search fa-close'); 
  }else { 
    form.removeClass('open'); 
    ico.toggleClass('fa-close fa-search'); 
  } 
});

* { 
  box-sizing: border-box; 
} 
 
.row { 
  position: relative; 
  padding-left: 30px; 
} 
 
.search__trigger, 
.search__enter { 
  border: none; 
  background: transparent; 
  font-size: 1rem; 
   
  display: block; 
  width: 30px; 
  height: 30px; 
  line-height: 30px; 
  text-align: center;   
  position: absolute;   
  top: 0; 
  left:0; 
} 
 
.search__input { 
  height: 30px; 
  width: 100%; 
  padding: 10px; 
  border: none; 
  background: transparent; 
  font-size: 1rem; 
  left: auto;   
  border-bottom: 2px solid #009eba; 
   
} 
 
.search__trigger { 
  color: #77ab46; 
  text-decoration: none; 
  z-index: 2; 
  transition: all .35s ease-in-out; 
} 
 
.search__enter { 
  color: #009eba; 
  opacity: 0; 
  z-index: 1; 
  transition: opacity .35s ease-in-out; 
} 
 
.search__input-wrap { 
  display: block; 
  overflow: hidden; 
  width: 0%;   
  transition: width .35s ease-in-out; 
} 
 
.open .search__input-wrap { 
  width: 100%; 
} 
 
.open .search__trigger { 
  left: 92%; 
} 
 
 
.open .search__enter { 
  opacity: 1; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
   
 
   
  <form class="search__form"> 
    <div class="row"> 
      <a href="#" class="search__trigger"> 
        <i class="fa fa-search" aria-hidden="true"></i> 
      </a> 
 
      <label for="search" class="search__input-wrap"> 
        <input type="search" name="search" id="search" class="search__input"> 
      </label> 
 
      <button type="submit" class="search__enter"> 
        <i class="fa fa-search" aria-hidden="true"></i> 
      </button> 
    </div> 
  </form>

Answer 2

Думаю, кнопка «закрыть» — лишняя. Посмотрите на поиск в шапке этого сайта. Поиск закрывается, как только поле теряет фокус.

Если отказаться от этой кнопки, то можно собрать вариант на чистом CSS, без скриптов. Чтобы поиск закрылся, достаточно щёлкнуть мышью за его пределами:

https://codepen.io/glebkema/pen/awxjdv

.search__control { 
  border: none; 
  border-bottom: 2px solid transparent; 
  width: 0; 
} 
.search__control:focus { 
  border-bottom-color: #11accf; 
  outline: none; 
  width: 200px; 
} 
.search__control::-webkit-input-placeholder { color: #11accf !important; } 
.search__control::-moz-placeholder { color: #11accf; } 
.search__control:-moz-placeholder { color: #11accf; } 
.search__control:-ms-input-placeholder { color: #11accf; } 
.search__control::placeholder { color: #11accf; } 
 
.search__label { 
  color: #84b559; 
  cursor: pointer;   
  float: left; 
  margin-right: 9px; 
} 
.search__control:focus + .search__label { 
  color: #11accf; 
  cursor: auto; 
} 
.search__control, 
.search__label { 
  -webkit-transition: all .4s ease; 
     -moz-transition: all .4s ease; 
      -ms-transition: all .4s ease; 
       -o-transition: all .4s ease; 
          transition: all .4s ease; 
}

<div class="search"> 
  <input class="search__control" id="search" type="text" placeholder="Search"> 
  <label class="search__label" for="search"><i class="fa fa-search"></i></label> 
</div> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Аналогичный вариант можно применить и к другому расположению лейбла и поля, но тогда не удастся перекрашивать лейбл с помощью соседних селекторов:

.search__control input { 
  border: none; 
  border-bottom: 2px solid transparent; 
  width: 0; 
} 
.search__control input:focus { 
  border-bottom-color: #11accf; 
  outline: none; 
  width: 200px; 
} 
.search__control input::-webkit-input-placeholder { color: #11accf !important; } 
.search__control input::-moz-placeholder { color: #11accf; } 
.search__control input:-moz-placeholder { color: #11accf; } 
.search__control input:-ms-input-placeholder { color: #11accf; } 
.search__control input::placeholder { color: #11accf; } 
 
.search__label { 
  color: #11accf; 
  cursor: pointer; 
  margin-right: 9px; 
} 
.search__control input, 
.search__label { 
  float: left; 
  -webkit-transition: all .4s ease; 
     -moz-transition: all .4s ease; 
      -ms-transition: all .4s ease; 
       -o-transition: all .4s ease; 
          transition: all .4s ease; 
}

<div class="search"> 
  <label class="search__label" for="search"><i class="fa fa-search"></i></label> 
  <div class="search__control"> 
    <input id="search" type="text" placeholder="Search"> 
  </div> 
</div> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">