Как скрыть svg иконку при вводе текста в поле?

Question

Есть форма ввода для поля Поиск. Рядом прописаны svg иконки для красоты. Надо сделать что бы при вводе текста в форме иконка поиска пропала и на её месте появилась иконка-крестик. Думаю что тут без java script не обойтись.

.search__input{font-size:15px;line-height:1.33333;position:relative;display:block;width:100%;height:42px;padding:10px 40px 10px 16px;box-sizing:border-box;border:1px solid #b3b5b4;border-radius:3px;background:#fff;margin:0;font-family:Open Sans,Arial,Helvetica,sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:150;}
.search__input::-webkit-input-placeholder{line-height:normal!important;}
.search__input:focus{outline:0 none;border-color:#2575ed;box-shadow:0 0 0 2px rgba(37,117,237,.3),inset 0 1px 2px rgba(0,0,0,.2)}
.search__input:focus+svg{fill:#2575ed;}
.search__icon{position:absolute;display:block;top:15px;right:15px;z-index:900;width:28px;height:28px;fill:#aaa;cursor:pointer;background:#fff;}
.search__icon.icon--search{pointer-events:none;}
.search__icon:hover{fill:#2575ed;}

<div class="faqsearch__search">
  <input type="search" autocomplete="off" placeholder="Мгновенный поиск по популярным вопросам" class="search__input faqsearch__input">
  <svg version="1.1" role="presentation" width="16" height="16" viewBox="0 0 24 24" class="search__icon icon--search fa-icon" aria-hidden="true" style=""><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
  <svg version="1.1" role="presentation" width="16" height="16" viewBox="0 0 24 24" class="search__icon icon--close fa-icon" aria-hidden="true" style="display: none;"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
</div>

Answer 1

Пример

.search__input {
  font-size: 15px;
  line-height: 1.33333;
  position: relative;
  display: block;
  width: 100%;
  height: 42px;
  padding: 10px 40px 10px 16px;
  box-sizing: border-box;
  border: 1px solid #b3b5b4;
  border-radius: 3px;
  background: #fff;
  margin: 0;
  font-family: Open Sans, Arial, Helvetica, sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  z-index: 150;
}

.search__input::-webkit-input-placeholder {
  line-height: normal !important;
}

.search__input:focus {
  outline: 0 none;
  border-color: #2575ed;
  box-shadow: 0 0 0 2px rgba(37, 117, 237, .3), inset 0 1px 2px rgba(0, 0, 0, .2)
}

.search__input:focus+svg {
  fill: #2575ed;
}

.search__icon {
  position: absolute;
  display: block;
  top: 15px;
  right: 15px;
  z-index: 900;
  width: 28px;
  height: 28px;
  fill: #aaa;
  cursor: pointer;
  background: #fff;
  pointer-events: none;
}

.search__icon:hover {
  fill: #2575ed;
}

.search__input:valid+.search__icon .search__path--close{
  opacity: 1;
}

.search__path--close,
.search__input:valid+.search__icon .search__path--zoom {
  opacity: 0;
}

.search__input::-webkit-search-cancel-button {
  margin-right: -25px;
}

<form class="faqsearch__search">
  <input type="search" autocomplete="off" placeholder="Мгновенный поиск по популярным вопросам" class="search__input faqsearch__input" required>
  <svg version="1.1" role="presentation" width="16" height="16" viewBox="0 0 24 24" class="search__icon fa-icon" aria-hidden="true">
    <path class="search__path search__path--zoom" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
    <path class="search__path search__path--close" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
  </svg>
</form>

БЛОГ НА HUSL

Как скрыть svg иконку при вводе текста в поле?

Ответы (1 шт):