Появляющееся поле поиска при клике на иконку

html/css

by Ksenia Polyakova

HTML

<div class="demo">
  <input class="hide" id="hd-1" type="checkbox">
  <label for="hd-1">
    <!-- Нажмите здесь, чтобы прочитать больше о HTML! -->
  </label>
  <div>
   <form action="">
   <input type="search"></form>
  </div>

CSS

/* Общий принцип: 
1. задаем checkbox и связанный с ним label
2. checkbox скрываем
.hide,
.hide + label ~ div {
  display: none;
}
3. для состояния label  = checked показываем скрытый div .hide:checked + label + div {
  display: inline-block;}
4. для появления делаем анимацию
5. вид для label в неотмеченном состоянии задаем через псевдо-стили before (.hide + label:before)
6. вид для label в отмеченном состоянии задаем через checked (.hide:checked + label:before) */

/*спрятали чекбокс и скрыте содержимое*/

.hide,
.hide + label ~ div {
  display: none;
}


/* вид для label */

.hide + label {
  cursor: pointer;
  display: inline-block;
}

.hide:checked + label + div {
  display: inline-block;
  /* background: #efefef; */
  /* -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
  -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
  box-shadow: inset 3px 3px 10px #7d8e8f; */
  margin-left: 20px;
  padding: 10px;
  /* анимация при появлении */
  -webkit-animation: fade ease-in-out 1.5s;
  -moz-animation: fade ease-in-out 1.5s;
  animation: fade ease-in-out 1.5s;
}

@-moz-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1
  }
}

/* вид для label не отмеченный*/
.hide + label:before {
  background-color: #1e90ff;
  color: #fff;
 content: "\002B";
  display: block;
  float: left;
  font-size: 14px;
  font-weight: bold;
  height: 16px;
  line-height: 16px;
  margin: 3px 5px;
  text-align: center;
  width: 16px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin-top: 5px;
}

/* вид для label отмеченный*/

.hide:checked + label:before {
  content: "\2212";
}