Сдвиг курсора в input

Question

Вот сам input

<div class="s_bar">
<input type="text" name="q" class="search">
<span class="fas fa-search searchicon" id="icon"></span>
</div>

Внутри него иконка поиска и когда пишешь текст то текст заходит за иконку, и я хочу чтобы курсор для ввода был справа от этой иконки Вот CSS код инпута и иконки

.s-bar {
   position: relative; 
}
.search {
    border-radius: 24px;
    border: 1px solid #c7c1c0;
    border-left: 0.1px solid white;
    border-top: 1px solid #ded8d7;
    width: 540px;
    height: 40px; 
}
.search:hover {
    border-color: gray;
}
#icon {
    display: inline-block;
    background-color: white;
    border-right: 0.1px solid white;
    border-radius: 24px;
    color: darkgrey;
    position: relative;
    top: 0px;
    right: 535px;
}

Answer 1

Лучше это сделать таким вот образом:

.s_bar {
  position: relative;
  width: 540px;
}

.search {
  display: block;
  position: relative;
  width: 460px;
  height: 40px;
  padding: 0 50px 0 30px;
  border: 2px solid #c7c1c0;
  border-radius: 24px;
  outline: none;
  font-size: 20px;
  color: gray;
}

.icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  fill: #999;
}

<div class="s_bar">
  <form action="" method="GET">
    <input class="search" type="text" placeholder="Поиск" name="name" required-placeholder="">
  </form>
  <svg class="icon" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 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>
</div>

БЛОГ НА HUSL

Сдвиг курсора в input

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