Скрыть иконку поиска когда поле для ввода в фокусе

Question

Нужно скрыть иконку в поле поиска когда само поле в фокусе.

<div class="news__search--form">
<input type="text" placeholder="Ich suche...">
</div>

Она установлена с помощью псевдо :after для класса - news__search--form. Если возможно без Js

Answer 1

@barmaley, на css такое нельзя сделать, т.к. плейсхолдер это свойство input, а иконка принадлежит его родителю. Лучше будет сделать ее не через ::after, а обычным тегом, расположенным внутри div, после input, чтобы появилась возможность написать для нее селектор зависящий от состояния input.

* {
  padding: 0;
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
}

.parent {
  margin: auto;
  position: relative;
}

.parent input {
  font-size: 160%;
  padding: .4em;
}

.parent svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: .4em;
  fill: #888;
}

.parent input:focus~svg {
  display: none;
}

<div class="parent">
  <input type="search" placeholder="Поиск...">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
</div>

Answer 2

Если позволяет поддержка браузерами, то можно использовать :focus-within:

.news__search--form {
  display: inline-block;
  position: relative;
}

.news__search--form::after {
  content: "";
  position: absolute;
  margin: auto;
  width: 9px;
  height: 9px;
  right: 6px;
  top: 0;
  bottom: 0;
  background: blue;
  pointer-events: none;
}

.news__search--form:focus-within::after {
  display: none;
}

<div class="news__search--form">
  <input type="text" placeholder="Ich suche...">
</div>

Answer 3

Можно использовать z-index:

.news__search--form {
  display: inline-block;
  position: relative;
}

.news__search--form::after {
  content: "";
  position: absolute;
  margin: auto;
  width: 9px;
  height: 9px;
  right: 6px;
  top: 0;
  bottom: 0;
  background: blue;
  pointer-events: none;
}

.news__search--form input {
  position: relative;
}

.news__search--form input:focus {
  z-index: 1;
}

<div class="news__search--form">
  <input type="text" placeholder="Ich suche...">
</div>

Answer 4

Можно использовать иконку, как фон для label, и уже его показывать/прятать

input{
  position: relative;
}

label{
  position: absolute;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  background-color: #ff0000;
}

input:focus~label{
display: none;
}

<div class="news__search--form">
  <input type="text" id="icon" placeholder="Ich suche...">
  <label for="icon"></label>
</div>

БЛОГ НА HUSL

Скрыть иконку поиска когда поле для ввода в фокусе

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