Добавить опцию файла вложения внутри текстового поля в Angular

Question

Я пытаюсь добавить значок файла вложения в текстовое поле.

<div class=row>
  <div class="col-lg-10">
    <input type="text" id="fname" name="firstname" placeholder="Type Here.." >
  <div class="col-lg-2">
    <div class="image-upload" id="">
      <label for="file-input">
        <img src="https://image.flaticon.com/icons/svg/53/53582.svg"/  width="35" height="35">
      </label>
      <input id="file-input" type="file" multiple="multiple"/>
    </div>
  </div> 
</div>

в приведенном выше коде прямо сейчас параметр текстового вложения или загрузки файла отображается после текстового поля, но я хочу, чтобы этот значок отображался в текстовом поле (например, для whtsapp).textbox или skype text box).

Кто-нибудь может мне помочь в этом?

Заранее спасибо!

Answer 1

Попробуйте, надеюсь, это вам поможет.Спасибо

.attachmentWrap {
  border: 1px solid #ccc;
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  width: 250px;
}
.attachmentWrap img {
  position: absolute;
  left: 1px;
  top: 1px;
  height: 15px;
  width: 15px;
}
.attachmentWrap input {
  border: 0;
}

<div class=row>
  <div class="col-lg-10">
    <div class="attachmentWrap">
      <input type="text" id="fname" name="firstname" placeholder="Type Here.." >
      <label for="file-input">
        <img src="https://image.flaticon.com/icons/svg/53/53582.svg" alt="" />
      </label>
    </div>
  </div>
  <div class="col-lg-2">
    <div class="image-upload" id="">
      <input id="file-input" type="file" multiple="multiple"/>
    </div>
  </div> 
</div>

Answer 2

Надеюсь, это работает!Управление левым полем в% по отношению к экрану браузера.

<hello name="{{ name }}"></hello>
<div class=row>
    <div class="col-lg-10">
        <img _ngcontent-c68="" height="20" src="https://image.flaticon.com/icons/svg/53/53582.svg" width="20" style="margin-left: 30%;z-index: 999999;position: absolute;">
    <input  type="text" id="icon" name="firstname" placeholder="Type Here.." >
  <div class="col-lg-2">
    <div class="image-upload" id="">
      <input id="file-input" type="file" multiple="multiple"/>
    </div>
  </div> 
</div>