Как исправить положение фонового изображения?

Question

У меня есть поле ввода текста, которое служит панелью поиска, и я хочу поместить стекло лупы влево, но когда поле ввода текста получает фокус, стекло должно исчезнуть.

.search .form-item input {
    background-image: url("https://i.stack.imgur.com/VtucQ.jpg");
    background-size: 70% 70%;
    background-position: -105% center;
    background-repeat: no-repeat;
  }
.search .form-item input:focus {
    background-image: none; }

<form action="/search" method="get" id="views-exposed-form-search-page-page-search" accept-charset="UTF-8">
  <div class="form--inline clearfix">
  <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-keys form-item-keys">
      <label for="edit-keys">Fulltext search</label>
        <input data-drupal-selector="edit-keys" type="text" id="edit-keys" name="keys" value="" size="30" maxlength="128" class="form-text">

        </div>

</div>

</form>

<div class="search">
    <input>
</div>

Я хотел добиться этого с помощью css:

  .navigation .search  input {
    background-image: url("../images/search.svg");
    background-size: 70% 70%;
    background-position: -105% center;
    background-repeat: no-repeat;
  }
  .navigation .search  input:focus {
    background-image: none; }

Код в основном работает. Дело в том, что мне нужно сделать background-image немного меньше, чего я достиг background-size: 70% 70%, но он смешивается с положением изображения - оно появляется в центре. Затем мне пришлось поиграть со свойством background-position:-105% center, что сместило иконку влево.

У меня вопрос, является ли хорошей практикой использование отрицательного процента для указания позиции background-image или есть более эффективные способы?

Answer 1

Вы можете сделать что-то подобное в CSS:

.search  input {
   background-size: 30px 17px;
   background-repeat: no-repeat;
   background-position: left;
   transition: .3s;
   background-image: url("https://i.stack.imgur.com/VtucQ.jpg");
 }

.search input:focus {
     background-position: left 50px; 
  }

и html

<div class="search">
    <input>
</div>

Размер фона 30x17, потому что изображение не потеряет пропорции.А на фокусе просто анимируйте положение с изображения, чтобы скрыть его.

Answer 2

Вы можете использовать фокус в. Когда кто-то вводит в текстовое поле скрыть изображение так просто. установить отображение нет изображения