Как сверстать форму поиска, как на картинке?

Question

[KiberKing]

Не получается сверстать такую форму поиска, съезжает иконка

Answer 1

[Алексей Непомнящий]

надеюсь поможет!
https://html5book.ru/pole-poiska-dlya-sayta/

Answer 2

[html-css]

очень просто

код прилагать нужно

Comments

[KiberKing]

Мне нужно код приложить?

[html-css]

KiberKing, а кому? мне за вас сверстать?
у вас же верстка съезжает, приложите, посмотрим почему съезжает

[html-css]

https://codepen.io/natojezlo/pen/eqrYGZ

[KiberKing]

<div class="col-6">
    <div class="d7">
        <form>
          <input type="text" placeholder="Поиск">
          <button type="submit"></button>
        </form>
    </div>
</div>

.d7 input {
  width: 639px;
  height: 50px;
  padding-left: 15px;
  border-radius: 42px;
  background: #F5F5F5;
  outline: none;
  position: relative;
}

.d7 button {
  width: 639px;
  height: 50px;
  background: none;
  border: none;
  position: absolute;
  top: -2px;
  right: 1;
}
.d7 button:before{
  content: "\f002";
  font-family: FontAwesome;
  color: #324b4e;
}

[html-css]

KiberKing, выше приложил ссылку

[KiberKing]

Большое спасибо, помогло!