Как разместить пользовательские значки рядом с полями ввода текста?

Question

Я ищу, чтобы создать желаемый стиль на фотографии показано. Возникли проблемы с получением пользовательских SVG, которые я создал, чтобы они были встроены в текстовое поле. Как мне создать этот эффект?

Вот фрагмент кода, который я использую в данный момент, где я ошибаюсь?

В основном я использую библиотеку JQM, если это поможет.

<div class="box2" style="display: inline-block; position:relative; width: 40vw;">
   <img src="img/icon/regicons/usernumber.svg">
   <input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>

Answer 1

Убедитесь, что <input/> имеет тот же height, что и ваш <image/>, и поместите его поверх родительского элемента.

• height: 32px; box-sizing: border-box;
• absolute; top: 0;

Отрывок:

input {
  height: 32px; 
  box-sizing: border-box; 
  position: absolute; 
  top: 0;
}
.box2 {
  display: inline-block;
  position:relative;
  width: 40vw;
}

    <div class="box2" style="">
        
        <img width="32" height="32" src="https://lh4.googleusercontent.com/-HhNoCFJ803s/AAAAAAAAAAI/AAAAAAAAAAA/ABtNlbAXJpr-jDsvmXVw0tx4PHId84zrlw/mo/photo.jpg?sz=32">
        <input type="text" name="userNo" id="userNo" placeholder="Number" required>
      
     </div>

Answer 2

Я бы использовал flexbox , который отзывчив по своей природе.

.box2 {
  display: flex;
  background-color: lightgrey;
  align-items: center; /* Vertical alignment */
}

<div class="box2" style="position:relative; width: 40vw;">
  <img src="https://via.placeholder.com/50x50/00ff00">
  <input type="text" name="userNo" id="userNo" placeholder="Number" required><br>
</div>