как сделать поисковкую кнопку картинкой

Question

Вожу значит я в: html <input id="button-search" type="submit">
css #button-search { height: 20px; width: 20px; background-image: url('img/premium-icon-magnifier-2319177.png'); Ну и получается какая-то шляпа :(

Answer 1

Пример

* {
  box-sizing: border-box;
}

.form-search {
  position: relative;
  max-width: 400px;
}

.form-search__control {
  height: 3rem;
  width: 100%;
  padding: .25rem 3rem .25rem 2rem;
}

.form-search__submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: .75rem;
}

<form action="#" class="form-search">
  <input class="form-search__control" type="search" name="search" required>
  <button class="form-search__submit">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/></svg>
  </button>
</form>

БЛОГ НА HUSL

как сделать поисковкую кнопку картинкой

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